回答編集履歴
1
追記
answer
CHANGED
|
@@ -36,4 +36,28 @@
|
|
|
36
36
|
}
|
|
37
37
|
```
|
|
38
38
|
例えばこんな感じで上下入れ替えたりするのもアリかなーと思います。
|
|
39
|
-
テキストと画像の上下入れ替えはflexboxのorderプロパティでもできるかな。
|
|
39
|
+
テキストと画像の上下入れ替えはflexboxのorderプロパティでもできるかな。
|
|
40
|
+
|
|
41
|
+
###flexboxの場合
|
|
42
|
+
|
|
43
|
+
flexboxの場合も入れておきます。（※旧ブラウザへのプレフィクス対応は省略）
|
|
44
|
+
|
|
45
|
+
```CSS
|
|
46
|
+
@media screen and (max-width: 640px) {
|
|
47
|
+
.box {
|
|
48
|
+
display:flex; /*flexboxレイアウト*/
|
|
49
|
+
flex-direction: column; /*縦並び*/
|
|
50
|
+
}
|
|
51
|
+
.box-img {
|
|
52
|
+
float:none;
|
|
53
|
+
order: 2; /*表示順を2番目に変更*/
|
|
54
|
+
}
|
|
55
|
+
.box-txt {
|
|
56
|
+
order: 1; /*表示順を1番目に変更*/
|
|
57
|
+
}
|
|
58
|
+
.box-txt,
|
|
59
|
+
.box-txt p {
|
|
60
|
+
display:block; /*ボックスを元に戻す*/
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|