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

表示順位の変更

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

関連記事