【CSS】PCとSPで要素の順番を変える方法

Question

下記のようなレスポンシブレイアウトにする場合、どのようにするのが良いのでしょうか？
Flexboxを使いたいのですが、うまくいきません。

<div class="item">
 <div class="information">
  <h2>タイトルが入る</h2>
  <p>説明テキスト説明テキスト説明テキスト...</p>
 </div>
 <img class="image" src="hoge">
</div>

.item {
 display: flex;
}

↑PC˜の場合はこれでいけるが、SPでdisplay: block;にすると、上から「タイトル→説明テキスト→画像」の順になってしまう

Comments

[m.ts10806]

どのようなコードを組んで何が起きているのでしょう。
単に「コードくれ」という作業依頼でしょうか。

[Lhankor_Mhy]

「Flexboxを使いたいのですが、うまくいきません」とのことですが、フレックスは絶対条件ですか？

[nyakorobin]

コード追加しました。
Flexboxはなるべく使いたいです。（floatを避けたい）

[Lhankor_Mhy]

HTMLは変更していいのですか？

[nyakorobin]

変更して大丈夫です

Answer 1

HTMLを変更せず、フレックスが絶対条件として回答します。

以下はいかがでしょうか。

.item{
    flex-direction: column;
}
.information{
    display: contents;
}
.information p{
    order: 1;
}

Comments

[nyakorobin]

ありがとうございます！できました！！
display: contents; が使えるの知りませんでした。