自分はいつもBootstrapを書く時にここを参考にしていました。
これをみると
- モバイル[Extra small devices]：〜767px：col-xs-
- タブレット[Small devices]：768px〜991px：col-sm-
- デスクトップ[Medium devices]：792px〜1199px：col-md-
- デスクトップ[Large devices]：1200px〜：col-lg-
となっているわけです。
で、これを元に760pxの画面でcol-xs-3 col-xs- 6 とか書いてたら全然スタイル効いてなくて、「なんでや！！」ってなりました。
そこでやっとBootstrapの公式ドキュメントを見に行きました。
そしたらありました。違いが。
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
つまり（厳密さよりわかりやすさ優先で書くと）
- モバイル[Extra small devices]：〜576px：col-xs-
- モバイル[Small devices]：576px〜768px：col-sm-
- タブレット[Medium devices]：768px〜992px：col-md-
- デスクトップ[Large devices]：992px〜1200px：col-lg-
- デスクトップ[Extra large devices]：1200px〜：col-xl-
となっていました。
そりゃ、いくら760pxの画面でcol-xs-3 col-xs- 6 とか書いてもダメなわけです。
Bootstrap4を元にcol-sm-3 col-sm- 6 としたら無事解決しました。
ちゃんと最新情報を参考にしようと思います。
