レスポンシブ時のカラム順序入れ替えは、flexboxのorderを利用する。
具体的には親要素にflexboxを指定し、子要素にorder番号指定する、といった形。
レスポンシブ時に番号の少ないものから順に表示される。
セクション毎であれば同じ番号を使用しても良い。
親要素（section）にクラス指定
|
1 2 3 4 5 6 7 |
/*—— スマホ時のカラム入れ替え ——*/ /*—— 親要素 ——*/ @media screen and (max-width: 768px) { .sp_column{ flex-direction: column; } } |
子要素（column）にクラス指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*—— スマホ時のカラム入れ替え ——*/ /*—— 子要素 ——*/ @media screen and (max-width: 768px) { .order1 { order: 1; } .order2 { order: 2; } .order3 { order: 3; } .order4 { order: 4; } .order5 { order: 5; } } |
※「.order番号」は入れ替えたいカラムの分だけ
コメントを残す