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

やりたいこと

これを

スマホの時はこうしたい

コードはこんな感じ。

            <div class="media">
                <figure class="media__image">
                    <img src="hogehoge.jpg" alt="">
                </figure>
                <div class="media__body">
                    <h2 class="media__title">タイトル</h2>
                    <p class="media__text">hogehoge</p>
                </div><!-- /.media__body -->
            </div><!-- /.media -->

.media {
    display: flex;
}

.media__image {
    width: 30%;
}

問題点

タイトルより画像の方が上に来るのならば、flex-directionを指定するだけでよいので問題ない。ただし今回の場合は画像が.media__bodyの中に割り込む形になるため少し悩んだ。

解決策

display:contentsを使ってみる

display:contentsはそのタグ自体の存在をないもののように扱えるみたい。（厳密には違うのかもしれないけど）

@media (max-width:700px) {
    .media {
        flex-direction: column;
    }
    .media__body {
        display: contents;
    }
    .media__title {
        order: -1;
    }
}

こうすることによって、htmlの方がこんなイメージになるのかな

            <div class="media">
                <figure class="media__image">
                    <img src="hogehoge.jpg" alt="">
                </figure>
               <!-- 下の２つを囲んでいた.media__bodyが存在しないような振る舞いになる -->
                <h2 class="media__title">タイトル</h2>
                <p class="media__text">hogehoge</p>
            </div><!-- /.media -->

あとはorderで順番を変えれば良い。

これってどうなのって話

見た目通りにはなるけど、普段あまり使わない display:contents を使っていいのかなっていうのがある。ブラウザごとに挙動が違ったりしないかな

（↑　対応してないものもいくつかある）

gridを使うっていうのも見かけるけど、それってタイトルが長くなったりした時もしっかり機能するの？

何かいい組み方があったら教えてください！！