[bootstrap]カラムの順番をPC版・スマホ版で入れ替える

bootstrapを使ったサイトを作成し、カラムの順番をPCとスマホで入れ替えたい場合の覚え書きとなります。

やりたいこと

3カラムのサイトを作成し、スマホの場合は一列に表示させたい。その時にカラムの順番も変えたい。

PCで1番左のカラムをスマホでは2(メインコンテンツ)の下に持ってきたいわけです。

push pullはbootstrap4では使えない

bootstrapではカラムの入れ替えにpush pullというものがありましたが、bootstrap4では使えなくなりました。

push、pullの記述で順番を入れ替えるのも気持ち悪い気がしていたので歓迎。

orderで順番を変える

じゃあ、bootstrap4ではどうやって順番を変えるのか？という話しですが、orderで順番を変えます。

<main class="container">
　<div class="row">
   <div class="col-lg-6 col-md-6 order-md-2">
　　# 1番目
   </div>

   <div class="col-lg-3 col-md-3 order-md-1">
　　# 2番目
   </div>

   <div class="col-lg-3 col-md-3 order-md-3">
   # 3番目
   </div>

 </div>
</main>

パソコンで表示した時に 3:6:3の割合で表示するようにしています。 order-md-2の部分はPCで見た時に2番目に来るように表示するようにしています。

上記のようにまず、スマホでどう見せたいのか？という点を念頭に2→1→3と配置し、パソコン版の場合にはorderを使って1→2→3と表示するようにしています。