質問編集履歴
1
試したことの追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
HTML&cssでLPページを作っています。
|
|
3
|
+
PC版では画像の横にstepと文章を並べ、レスポンシブデザインではstep 画像 文章の順番にしたいのですが
|
|
4
|
+
レスポンシブデザインにorderを使っても子要素にしか反応しないので上手く行かず、
|
|
5
|
+
PC版にinline-blockを使用してもstepは横に並ぶのですが文章が横に並びませんでした。
|
|
6
|
+
インターネットや書籍で調べて試していますが何か他の方法を知っている方がいらっしゃいましたら教えていただけると助かります。
|
|
7
|
+
|
|
8
|
+
質問するのは初めてでプログラミングも始めたてなので至らぬ点あると思いますがよろしくお願いいたします。
|
|
3
9
|
|
|
4
10
|
### 実現したいこと
|
|
5
11
|
レスポンシブデザインでstep1と「濡らす～」の文章の間に画像を入れたいです。
|
|
@@ -7,7 +13,8 @@
|
|
|
7
13
|
### 発生している問題・エラーメッセージ
|
|
8
14
|
|
|
9
15
|
```
|
|
10
|
-
|
|
16
|
+
orderを使用しても順番が変わらない状態です。
|
|
17
|
+
また、PC版をinline-blockで整えようとしましたがstepは画像の横に並びますが文章が横並びになりませんでした。
|
|
11
18
|
```
|
|
12
19
|
|
|
13
20
|
### 該当のソースコード
|
|
@@ -103,9 +110,16 @@
|
|
|
103
110
|
|
|
104
111
|
### 試したこと
|
|
105
112
|
|
|
106
|
-
orderを使
|
|
113
|
+
インターネットで検索したところorderを使うと順番が変わるということを知り、orderを使ってみましたが動きませんでした。
|
|
114
|
+
さらに調べるとorderはdisplay:flexの子要素しか反応しないということを知りましたがPC版画像と文字を横並びにするために
|
|
115
|
+
stepと文章を囲っているので子要素にならず、orderが反応しないことが分かりました。
|
|
116
|
+
今度はPC版でdisplay:flexを使わない方法を調べinline-blockで同じようにできるようなのですが
|
|
117
|
+
PC版でinline-blockを使ったところstepは画像の横に行くのですが文章が画像の横に行かず
|
|
118
|
+
画像の下に残っている状態となってしまいました。
|
|
107
119
|
|
|
120
|
+
他にもdivを消すためにdisplay:noneを使ってみましたが全てが消えてしまってしまいました。
|
|
121
|
+
その他のflex-boxも試してみましたが順序が変われど間に入れることができませんでした。
|
|
108
|
-
##
|
|
122
|
+
## 補足情報（FW/ツールのバージョンなど）
|
|
109
123
|
|
|
110
124
|
ここにより詳細な情報を記載してください。
|
|
111
125
|
|