Не работают классы hidden-* и visible-* на Bootstrap 4, как исправить?

После обновления популярного фреймворка Bootstrap до 4-й версии некоторые владельцы сайтов столкнулись с тем, что классы отвечающие за отображение блоков на определенных размерах экранов перестали работать. Классы вида hidden-* и visible-* активно использовались в 3й версии Bootstrap для разработки в том числе и в нашей студии.

4-я версия Bootstrap Больше не поддерживает классы hidden-* и visible-*, но необходимый для их работы функционал остался. Если вы хотите скрыть элемент на определенном размере экрана вы должны использовать класс d-*

Чтобы было проще и нагляднее, ниже представлены старые классы и их аналоги в Bootstrap 4.

Класс в Bootstrap 3Аналог в Bootstrap 4
hidden-xs-downd-none d-sm-block
hidden-sm-downd-none d-md-block
hidden-md-downd-none d-lg-block
hidden-lg-downd-none d-xl-block
hidden-xl-downd-none (аналог hidden)
hidden-xs-upd-none (аналог hidden)
hidden-sm-upd-sm-none
hidden-md-upd-md-none
hidden-lg-upd-lg-none
hidden-xl-upd-xl-none
hidden-xs (только)d-none d-sm-block (аналог hidden-xs-down)
hidden-sm (только)d-block d-sm-none d-md-block
hidden-md (только)d-block d-md-none d-lg-block
hidden-lg (только)d-block d-lg-none d-xl-block
hidden-xl (только)d-block d-xl-none
visible-xs (только)d-block d-sm-none
visible-sm (только)d-none d-sm-block d-md-none
visible-md (только)d-none d-md-block d-lg-none
visible-lg (только)d-none d-lg-block d-xl-none
visible-xl (только)d-none d-xl-block