Bootstrap4で幅によって並び順を変えるレスポンシブデザイン

<br />

自粛が長くなってきたのでスマホ用のサイトを作ろうと思ったのがきっかけ
Bootstrap4でレスポンシブデザインを作り
スマホとPCでカラムの順番を変えてみた

・コード
今回の説明コード

<div class="row">
<div id="a" class="col-md-3 order-2 order-md-1">
</div>
<div id="b" class="col-md-9 order-1 order-md-2">
</div>
</div>

・col-md-hogehoge
idがaのdevが3/12
idがbのdevが9/12
の幅を取る

・order-hogehoge
idがaのdevが2
idがbのdevが1
なのでbが上や左から表示される

・order-md-hogehoge
md以上の幅だと
idがaのdevが1
idがbのdevが2
なので例えばPCからだとaが上や左から表示される

・order-のまとめ
というわけでorderを重ね掛けした形になるので
タブレット以上だとaが左から
タブレット未満だとbが上から
出るような形になる