html&cssの文字と文字の間に画像を入れたいです。

Question

前提

HTML&cssでLPページを作っています。
PC版では画像の横にstepと文章を並べ、レスポンシブデザインではstep　画像　文章の順番にしたいのですが
レスポンシブデザインにorderを使っても子要素にしか反応しないので上手く行かず、
PC版にinline-blockを使用してもstepは横に並ぶのですが文章が横に並びませんでした。
インターネットや書籍で調べて試していますが何か他の方法を知っている方がいらっしゃいましたら教えていただけると助かります。

質問するのは初めてでプログラミングも始めたてなので至らぬ点あると思いますがよろしくお願いいたします。

実現したいこと

レスポンシブデザインでstep1と「濡らす～」の文章の間に画像を入れたいです。
https://gyazo.com/cf6490f0cff8f314488fa9b0eede75d3

発生している問題・エラーメッセージ

orderを使用しても順番が変わらない状態です。
また、PC版をinline-blockで整えようとしましたがstepは画像の横に並びますが文章が横並びになりませんでした。

該当のソースコード

<div class="use_chart">
      <div class="use_pict">
     <img src="./images/use_step1.jpg" alt="use1" class="use_steps1_img">
     </div>
     <div class="ss_one">
     <div class="s_one">
      <p>STEP1</p>
     </div>
     <div class="s_onee">
      <p>濡らす前にブラッシングを行い、髪の毛のほつれや付着したホコリを取る</p>
     </div>
     </div>
     </div>

該当のソースコード

.use_chart {
  border-bottom: 1px solid #a9a9a9;
  display: flex;
}

.use_steps1_img {
  width: 509px;
  margin-bottom: 30px;
}

.ss_one {
  margin-left: 15px;
}

.s_one {
  font-family: Philosopher;
  font-weight: normal;
  font-size: 50px;
  color: #212529;
  font-style: italic;
  border-bottom: 4px solid #212529;
  display: inline-block;
  line-height: 35px;
}

.s_onee {
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 28px;
  color: #212529;
  margin-top: 29px;
}

該当のソースコード

.use_chart {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #808080;
}

.use_pict{
  order: 1;
}

.use_steps1_img {
  width: 89.33vw;
  margin-bottom: 0;
}

.ss_one {
  margin-left: 0;
  text-align: left;
}

.s_one p {
  font-size: 4.267vw;
  border-bottom: 1px solid #212529;
  line-height: 0;
  order: 0;
}

.s_onee p {
  font-size: 3.733vw;
  margin-top: 0;
  order: 2;
}

試したこと

インターネットで検索したところorderを使うと順番が変わるということを知り、orderを使ってみましたが動きませんでした。
さらに調べるとorderはdisplay:flexの子要素しか反応しないということを知りましたがPC版画像と文字を横並びにするために
stepと文章を囲っているので子要素にならず、orderが反応しないことが分かりました。
今度はPC版でdisplay:flexを使わない方法を調べinline-blockで同じようにできるようなのですが
PC版でinline-blockを使ったところstepは画像の横に行くのですが文章が画像の横に行かず
画像の下に残っている状態となってしまいました。

他にもdivを消すためにdisplay:noneを使ってみましたが全てが消えてしまってしまいました。
その他のflex-boxも試してみましたが順序が変われど間に入れることができませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

.s_one(step1) と .s_onee(濡らす～) の間に、use_pict(画像) を配置したいということでしょうか。
.s_oneと.s_oneeは.ss_one の子要素なので、そこに.use_pictを潜り込ませるのは無理ですね。

.ss_oneがなければ、orderプロパティで並べ替えることができます。幸いなことに新しく導入されたdisplay: contents;を設定すればなかったことにできます(IE非対応ですがもう無視していいでしょう)。

[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック | コリス

レスポンシブCSSに下記を追加すればいいでしょう。

.ss_one {
  display: contents;
}
.s_one {
  order: 0;
}
.s_onee {
  order: 2;
}

Comments

[ti-10]

ありがとうございます！
お陰様で出来ました。