スマホのときだけテキストと画像の順番を入れ替える方法

カテゴリー(CC): html/css。

よく、下記のようにテキストと画像が交互に配置しているデザインを見る機会があるかと思います。

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

このデザインをレスポンシブに対応させるためには、それぞれ、テキストと画像の幅を100%に設定すると思いますが、それだけだと、下記のようにテキストと画像の順序がバラバラになってしまいます。

▼スマホで見たとき

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※特に、Wordpressの投稿のカラム機能を利用したときは、何もせずにレスポンシブ対応になりますが、順番までは変わっていないので注意です。

 

flex-direstion: column-reverseを使う

ここで、flex-direstion: column-reverse; を使います。
column-reverseを設定することによって、カラムが逆向きになります。

なので、下記のようにスマホのウィンドウ幅のときは、奇数またが偶数の要素だけ逆向きといった指定をしてあげれば、綺麗に揃います。

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

HTML

<div class=”box”>
<div class=”box__text”>
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<img src=”〇〇”>
</div>
<div class=”box”>
<img src=”〇〇”>
<div class=”box__text”>
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

CSS

.box {
display: flex;
flex-direction: column;
}

.box__text {
width: 100%;
}

.box img {
width: 100%;
object-fit: contain;
}

.box:nth-child(odd) {
flex-direction: column-reverse;
}

関連記事