Frontend Technology

[css] レスポンシブの時にdiv要素の順番を入れ替える方法

2021-01-15

レスポンシブの時にdiv要素の順番を入れ替える時の備忘録。


問題の詳細

HTMLの構造を、レスポンシブだと順番を変えて表示させたい時がある。

例えば、下のようなレイアウトの場合。



PC表示で見ると、交互に写ってかっこいいが、レスポンシブだと、画像→文章→文章→画像の順番になってかっこ悪い。

なので、画像→文章→画像→文章の形で表示させる。


flexboxのorderを利用する

解決法としては、flexboxのorderを使って解決する。


HTMLで orderクラスを記述する。

それぞれ、画像と文章を囲っているdiv要素に、orderクラスを記述する。

今回は上の写真の③の文章と④の画像を入れ替えたいので、order3とorder4を入れ替えた。

<div class="box">
    <div class="cozyspace1-img order1">
       <img src="./cozyspace.png">
    </div>
    <div class="cozyspace1-message order2">
       <h2>居心地の良い空間</h2>
       <h3>cozy space</h3>
       <p>ここに文章が入ります。</p>
    </div>
   <!-- ③の文章の部分をorder4にする -->
    <div class="cozyspace2-message order4">
       <h2>居心地の良い空間</h2>
       <h3>cozy space</h3>
       <p>ここに文章が入ります。</p>
    </div>
  <!-- ④の写真の部分をorder3にする -->
    <div class="cozyspace2-img order3">
       <img src="./cozyspace2.png">
    </div>
</div>


CSSの親クラスにdisplay: flexを入れる

stylesheet.cssでは、HTMLでorder1 - 4まで囲った要素 box に対して、display: flexをかける。

responsive.cssでflex-direction: column;にすると、縦一列にコンテンツが並ぶ。

/* stylesheet.css  */
.box{
 display: flex;
}

/* responsive.css  */
.box{
 flex-direction: column;
}


小要素にorderを記述

responsive.cssでは下記のように記述する。

/* responsive.css  */

  .order1 {
    order: 1;
  }
  .order2 {
    order: 2;
  }
  .order3 {
    order: 3;
  }
  .order4 {
    order: 4;
  }

すると順番が変わって表示される。

-Frontend, Technology