CSS3で上下のブロックを入れ替えしたい、レスポンシブデザイン

レスポンシブデザインを使って、スマホ画面上での上下のブロックの入れ替えをしたい。


▶ index.html

　<div class="row" >
 <div id="left-block" >
  A
 </div >
 <div id="center-block" >
  B
 </div >
</div >

パソコン画面上では

通常スマホ画面上では

AブロックとBブロックを上下で入れ替えるには

▶ template.css

.row {
 display: flex;
 flex-direction: column-reverse;
}

を記述すると、上下が入れ替わる。
ただし、古いブラウザーに対応するには、別な記述をしなければならない。

CSS,javascript,上下,class,reverse