【css3】カラム、ボックス、ブロックを好きな順番に配置！

レスポンシブにする時にPCとは違うブロックの順番にしたい時に便利！

(例)

<div class="test">
   <p class="test_in1">ブロック(1)</p>
   <p class="test_in2">ブロック(2)</p>
   <p class="test_in3">ブロック(3)</p>
   <p class="test_in3">ブロック(4)</p>
</div>

のブロック3を一番上に！とか出来ちゃう。

.test {
   display: flex;           /* Flexコンテナ化 */
   flex-direction: column; /* 縦向きに配置 */
}
.test_in3 {
   order: -1;
}

こんな感じ。

.test_in1 { order: 4; }   /* 配置順を4番目に */
.test_in2 { order: 2; }   /* 配置順を2番目に */
.test_in3 { order: 1; }   /* 配置順を1番目に */
.test_in4 { order: 3; }   /* 配置順を3番目に */

にも出来る！！

コンテンツを縦にするには

flex-direction: column;、

横にするには

flex-direction: row; だよ！！

参考URL

https://allabout.co.jp/gm/gc/459917/2/