Bootstrap3までは、「レスポンシブ・ユーティリティ」クラスとして、「.visible」「.hidden」を使用していたかと思います。
■Bootstrap3での「.visible」「.hidden」の主な使用例
①visible-xs
767px以下は表示
②hidden-lg
1200px以上は非表示
これがBootstrap4では使用できなくなりました。その代わりにBootstarp4では新たなクラスが用意されています。
「.visible」「.hidden」のクラスの代わりに用意されたのが、「.d-block」 「.d-none」クラスです。使い方は、下記の通りです。
■Bootstrap3での「.d-block」 「.d-none」の主な使用例
①d-block d-sm-none
575px以下は表示。576px以上は非表示
②d-none d-sm-block d-lg-none
575px以下は非表示。576px以上-991px以下では表示。992px以上は非表示
注意点は、xs（575px以下）の時は、「d-xs-none」、「d-xs-block」という記載はせず、「d-none」、「d-block」という記載になる点ですね。Bootstrap4では、「.visible」「.hidden」の代わりに「.d-block」 「.d-none」を使用する以外に、この点がBootstrap3と異なりますので注意が必要です。
Bootstrap4に移行し、ちょっとした記述の違いで動作しなくなる事がありますので、しっかりと覚えていきたいものですね。