スマホ時に、メディアの順番を「タイトル→画像→テキスト」の順番にしたい

Question

前提

スマホ時に、メディアの順番を「タイトル→画像→テキスト」の順番にしたい

実現したいこと

PCでこのように表示されるもの（メディア）を、スマホでは「タイトル→写真→テキスト」の順番で表示されるようにしたいです。

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

普段メディアを再現するときにはdisplay:flexを使って左右に並べています。もしスマホ版で「写真→タイトル→テキスト」の順番にしたいのであればflex-direction:columnにすれば良いので問題ないのですが、質問の順番にするとなると写真をタイトルとテキストの間に割り込ませなければならないため実装の方法に迷っています。

質問したいこと

①flexを用いて質問通りの順番にするにはどのように考えれば良いでしょうか？
②flexを用いないとすればどのような方法が考えられるでしょうか？

Answer 1

①flexを用いて質問通りの順番にするにはどのように考えれば良いでしょうか？

HTMLは、タイトル→写真→テキスト の順にしておいて、
PCのときは、写真を posion: absolute; で配置する。
HTMLの変更不可なら、order で順番変更。

②flexを用いないとすればどのような方法が考えられるでしょうか？

Gridレイアウトが簡単そうです。