XS
モバイル |
S
タブレット |
M
タブレット & PC Laptop |
PC Laptop |
XL
Display, PC, Laptop |
|
---|---|---|---|---|---|
ブレイクポイント | < 切替なし | ≥ 576px | ≥ 768px | ≥ 992px | ≥ 1200px |
container幅 | 自動 | 570px | 756px | 976px | 1168px |
Apple devices reference |
![]() ![]() ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() |
![]() |
Non-Apple devices reference |
![]() ![]() ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() |
![]() |
カラム余白 | 30px(左右に15px) | ||||
クラス名 | .col-xs | .col-sm- | .col-md- | .col-lg- | .col-xl- |
普通は先に記述したカラムが左にきますが、.col-[prefix]-push-*と.col-[prefix]-pull-*クラスを使うことで表示される順序を変更することができます。
col-md-push-*は、本来の位置より、*に指定したカラム数分、右に配置する。
col-md-pull-*は、本来の位置より、*に指定しmdカラム数分、左に配置する。
md以上の画面サイズでは、push/pullが適用されて並べ替えられています。 sm以下の画面サイズにすると解除されて 写真が先に表示されます。
.col-md-4 .col-sm-12 .col-xs-12 .col-md-push-8