参考サイト1：https://www.webdesignleaves.com/pr/plugins/bootstrap4_01.html

参考サイト2：https://getbootstrap.jp/docs/4.2/layout/grid/

 

表示順変更

bootstrap3
.col-○○-n.col-○○-push-m .col-○○-m col-○○-pull-n

bootstrap4
.col-○○-n.order-○○-2 .col-○○-m.order-○○-1

※「n」「m」には数字が入ります。
「order」は「0～12」までの数で指定。
「0」が初期値、数が少ないほど優先度が高く前に表示され、数が多いほど優先度が低く後に表示されます。
ブレイクポイントも指定できます。

 

基本order

以下の例では768px以上は背景色青が前、背景色灰色が後になります。

 

「.order-first」「.order-last」について

数字で指定するのとは別に、「.order-first」「.order-last」というクラスでも指定できます。
「.order-first」は指定した要素を一番前に、「.order-last」は指定した要素を一番後ろに動かします。
ブレイクポイントも指定できます。