[ CSS ] 要素の順番を入れ替える box & box-ordinal-group

どうしても、ある特定のページだけ要素の順番を入れ替えたい、でも HTML の記述はサイト全体で同じにしておきたい。そんな時に使える CSS をご紹介します。

<div id=”a”>
<div id=”b”>bbb</div>
<div id=”c”>ccc</div>
</div>

上記の様に id = a が全体を覆う親要素で、子要素に id = b, id = c がある場合、

#a {
width: 400px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}

#b {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;

}
#c {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}

このように設定すると display: box; で縦並びになり box-ordinal-group と組み合わせると表示順を変更できる横並びの順番も可能。

See the Pen.

まだまだベンダープレフィクスが必要（2017/09）なのが多少気になりますが、これからに期待できる CSS だと言えるでしょう。（＊ベンダープレフィクスの位置にご注意）
ちなみに、ordinal = ORDER の形容詞形で「順序を示す」という意味です。

お試し頂ければと思います。