Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。
画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。
サンプルを作成しましたので、良ければ見ていってくださいね。
PCでは2カラムで、スマホ画面では1カラム（サンプル）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <img class="img-fluid" src="https://goo.gl/gU9Bbr"> </div> <div class="col-md-6 col-sm-12"> <img class="img-fluid" src="https://goo.gl/gU9Bbr"> </div> <div class="col-md-6 col-sm-12"> <img class="img-fluid" src="https://goo.gl/gU9Bbr"> </div> <div class="col-md-6 col-sm-12"> <img class="img-fluid" src="https://goo.gl/gU9Bbr"> </div> </div> </div> |
「col-md-6」クラスで「768px〜991px」のときに2カラムになります。
「col-sm-12」クラスで「576px〜767px」のときに１カラムになります。
指定していないサイズのときは、Bootstrap4が自動で調整してくれます。
もし、希望のカラムになっていないときは明示的にカラムを指定してあげましょう。
| 名称 | 領域サイズ |
|---|---|
| xs | 0px〜575px |
| sm | 576px〜767px |
| md | 768px〜991px |
| lg | 992px〜1199px |
| xl | 1200px〜 |
サンプルも載せておきますね。
See the Pen Bootstrap4 PCでは2カラムで、スマホ画面では1カラム（サンプル） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
