FlexならCSSだけで順序入れ替え
基本HTMLで書かれたものは左上から右下に掲載され逆転するのは難しかった。
CSS3のFlex（フレキシブルボックスレイアウト）を使うと簡単に順番が変えられるようになった。
Flexはテーブルレイアウトかあらfloatの時代を経て現れた新しいレイアウト方式で古いパソコンやスマホは未対応だったりしますが、IE8-9にも対応させるflexibility.jsも現れ期待がもてます。
本題の順序を変更するCSSですが、今回はPC版だとHTMLの順番で表示されるが、スマホだと3番目の項目が一番上に移動するようなサンプルを作成した。
Flex順序サンプル
簡単に解説すると、まず親要素（flexコンテナ）に
display: flex;
と入れフレキシブルボックスレイアウト化し、合わせて表示方向を上から下になるように指定し下記も入れて置く
flex-direction: column;
スマホの場合は特定の子要素（Flexアイテム）に
order: -1;
と記述し最初に持ってきている。