Bootstrap4では４つのブレイクポイントがある
Bootstrapには576px、768px、992px、1200pxの４つのブレイクポイントがあります
| ブレイクポイント | - | 576px | 768px | 992px | 1200px |
|---|---|---|---|---|---|
| 画面幅(px) | ~575 | 576~767 | 768~991 | 992~1199 | 1200~ |
| 主な対象デバイス | - | スマホ | タブレット | PC | 大型ディスプレイ |
| 名称 | Extra Small | Small | Medium | Large | Extra Large |
| クラス接頭辞 | col-数字 | col-sm-数字 | col-md-数字 | col-lg-数字 | col-xl-数字 |
例)PCでは横表示、スマホでは縦表示にしたいとき
この場合、Medium以上は横表示に切り替わるようにします
<div class="row">
<div class="col-md-2">block A</div>
<div class="col-md-8">block B</div>
<div class="col-md-2">block C</div>
</div>
col-md-数字とすることで、767以下の画面で見た場合は縦に積み重なって表示され、768px以上の画面で見たときに2:8:2で横表示されます。