pure.cssでレスポンシブ対応するなら、flexを使いましょう。
pure.cssで素直にレスポンシブ対応Gridだけで構築すると
| A | B | C |
| A |
| B |
| C |
こんな感じにHTMLに記述された順番にしか並びません。
例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか？
pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単！
以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。
| A | B | C |
A:1、B：2、C:3
| B | C |
| A | |
A:3、B:1、C:2
| B |
| A |
| C |
A:2、B:1、C:3
こんな感じにも簡単にできます。
弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。
@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー＞狭い」とします。
/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-right {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
.container-inner > .side-l {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-left-r {
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
.container-inner > .side-lr ,
.container-inner > .side-r {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-right {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .side-l {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
.container-inner > .main-left-r {
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
.container-inner > .side-lr ,
.container-inner > .side-r {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-right {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-left-r {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .side-lr ,
.container-inner > .side-l {
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
.container-inner > .side-r {
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.container-inner > .main-right {
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
} 