ほんっとにはじめてのHTML5とCSS3【18-4】Flexboxの orderプロパティで表示順を自由に変えよう サンプル
5番目に
最初に
CSS
div#container {
display:flex;
flex-wrap:wrap;
justify-content: space-between}
div#container section {flex:1 0 100px}
/*↓アイテムを全部書き出して、1番目と5番目のorderのみ入れ替え*/
div#container section:nth-child(1) {order:5}
div#container section:nth-child(2) {order:2}
div#container section:nth-child(3) {order:3}
div#container section:nth-child(4) {order:4}
div#container section:nth-child(5) {order:1}
div#container section:nth-child(6) {order:6}
2番目に
先頭に
CSS(こちらはマイナスの値を使っています)
div#container2 {
display:flex;
flex-wrap:wrap;
justify-content: space-between}
div#container2 section {flex:1 0 100px}
/*↓5番目と6番目のみ マイナスの値でorderを指定*/
div#container2 section:nth-child(6) {order:-2}
div#container2 section:nth-child(5) {order:-1}