flexboxの順序を入れ替える

一昔前は左右逆なレイアウトを作る時は float を使うことが多かったですが、CSS3のflexboxを使えば簡単にできます。

See the Pen CSS3 Flexbox : 左右並び替え by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

上記レイアウトはいずれも同一のHTMLで、2つ目のボックスをプロパティ一つで要素の順序を入れ替えています。

.flex2 {
  flex-flow: row-reverse;
}

「flex-flow: row-reverse」でflex要素を逆順に並び替えられます。
左右逆ではなくて逆順なので、要素が3つ以上あれば3,2,1という並び順になります。