【レスポンシブ対応】CSSだけでDIVの上下を入れ替える

上下に並んだボックス要素の順番を入れ替えるCSSです。レスポンシブにも対応しているので、デバイスごとにコンテンツの優先順位を変えたいときにも有効です。

【レスポンシブ対応】CSSだけでDIVの上下を入れ替える

CSSで上下に並んでいるボックス要素があったとき、CSSだけで順番を入れ替える方法です。

マークアップは論理的な読みやすさを優先して、レイアウトだけ遊びたい場合などに便利です。

また、メディアクエリで囲えばデバイスごとにコンテンツの順番を変えられるのでレスポンシブデザインとも相性が良いです。

上下のDIVを入れ替えるCSS

4つのDIVを box1, box2, box3, box4 の順に用意し、box1, box2 と box3, box4 をそれぞれ .wrap で包んで配置します。

【HTML】
<div class="wrap">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
<div class="wrap">
  <div class="box3">box3</div>
  <div class="box4">box4</div>
</div>

判りやすくするために色を付けます。 box1 と box3 に黄色、 box2 と box4 を青くします。何もしなければ 黄色x青、黄色x青と並ぶはずです。

ここで、2つめの wrap である box3, box4 の順番をCSSで入れ替えます。HTMLでは box3, box4 の順に配置されてることを確認して下さい。

【CSS】
.wrap {
  position: relative;
  height: 200px;
  }
.box1,
.box2,
.box3,
.box4 { width: 100%; }
.box1,
.box3 {
height: 50px;
background-color: Orange;
}
.box2,
.box4 {
height: 150px;
background-color: RoyalBlue;
}
.box1, .box2 { position: relative; }
.box3 {
  position: absolute;
  bottom: 0;
  }
.box4 {
  position: absolute;
  top: 0;
  }

デモ【通常配置】

まずノーマル配置です。box1, box2 の配置指定は事実上なにもしてないので、単に着色されたDIVが並びます。

box1
box2

デモ【上下入れ替え】

今度は上下を入れ替えました。box4, box3 の順番になってることを確認して下さい。

box3
box4

レスポンシブデザインで上下を入れ替える

これを基本としてレスポンシブ対応にします。同様に box5, box6 を新設します。(基本指定は前章を参照のこと)

【CSS】
@media screen and (min-width: 500px) {
.box5 {
  position: absolute;
  bottom: 0;
  }
.box6 {
  position: absolute;
  top: 0;
  }
}

デモ【レスポンシブで上下反転】

ブレイクポイントは 横500px に設定しています。小さい画面のときは何もせず box5, box6 の順で表示し、画面が大きくなると上下がいれ代わります。

PCだったら画面を伸ばしたり縮めたり、スマホは縦横入れ替えてご覧下さい。

box5
box6

メディアクエリを増やせば、そのぶんバラエティが出ます。

DIVの上下を入れ替える方法あれこれ

マークアップを変えずにレイアウトを変えたい場合(「マークアップをいじらせて貰えない場合」を含む ^^;)や、期間限定のお知らせを入れたい場合に便利です。

あと、メディアクエリで入れ替える場合は対象デバイスによってコンテンツの表示に制限があるときなどに使えます。「PCの方はこちら」「モバイルはこちら」でそれぞれを先に表示させたり。

他に何か面白い使い道があったら教えて下さい。