Bootstrap4カラムを入れ替える（表示順の変更）

2018年3月8日2023年9月23日

表示順位の変更

order-*

bootstrap4では.col-**-push-* .col-**-pull-* クラスはなくなり、.order-*クラスに統一されました。

1番目

2番目

3番目

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">1番目</div>
  <div class="order-2 p-2">2番目</div>
  <div class="order-1 p-2">3番目</div>
</div>

html上では1番目、2番目、3番目で書いていますが、実際は3番目から表示されています。

サイズ別

	576px以上	768px以上	992px以上	1200px以上
`.order-0`	`.order-sm-0`	`.order-md-0`	`.order-lg-0`	`.order-xl-0`
`.order-1`	`.order-sm-1`	`.order-md-1`	`.order-lg-1`	`.order-xl-1`
`.order-2`	`.order-sm-2`	`.order-md-2`	`.order-lg-2`	`.order-xl-2`
`.order-3`	`.order-sm-3`	`.order-md-3`	`.order-lg-3`	`.order-xl-3`
`.order-4`	`.order-sm-4`	`.order-md-4`	`.order-lg-4`	`.order-xl-4`
`.order-5`	`.order-sm-5`	`.order-md-5`	`.order-lg-5`	`.order-xl-5`
`.order-6`	`.order-sm-6`	`.order-md-6`	`.order-lg-6`	`.order-xl-6`
`.order-7`	`.order-sm-7`	`.order-md-7`	`.order-lg-7`	`.order-xl-7`
`.order-8`	`.order-sm-8`	`.order-md-8`	`.order-lg-8`	`.order-xl-8`
`.order-9`	`.order-sm-9`	`.order-md-9`	`.order-lg-9`	`.order-xl-9`
`.order-10`	`.order-sm-10`	`.order-md-10`	`.order-lg-10`	`.order-xl-10`
`.order-11`	`.order-sm-11`	`.order-md-11`	`.order-lg-11`	`.order-xl-11`
`.order-12`	`.order-sm-12`	`.order-md-12`	`.order-lg-12`	`.order-xl-12`

URLをコピーしました！