スマートフォンとPCの場合で枠の順番を入れ替える

PCの場合は、Frame1のdiv枠を Frame2 のdiv枠より上に表示したいですが、スマートフォンの場合は、Frame1 を Frame2 の下に表示したいです。 Frame1を2つ記述してメディアクエリで表示、非表示を切り替えれば実現はできますが、同じものを2か所には記述したくないです。もっとエレガントな方法はありますか？

    <div class="Frame1">コンテンツ1</div>
    <div class="Frame2">コンテンツ2</div>

スマートフォンとPCの場合で枠の順番を入れ替えるコードと実行結果を紹介します。

方針

いくつか方針はありますが、今回はFlexboxを利用し、orderプロパティの値をメディアクエリで切り替える方法を紹介します。

実装例

コード

以下のHTML, CSSファイルを作成します。

flex-order.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-order.css" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
</head>
<body>
  <h1>PCとスマートフォンで枠の順番を入れ替えるデモ</h1>

  <div class="ContentFrame">
    <div class="Frame1">PCの場合、先に表示されます。</div>
    <div class="Frame2">スマートフォンの場合、先に表示されます。</div>
  </div>
</body>
</html>

flex-order.css

h1 {
  font-size:1.8em;
}

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

.Frame1 {
  background-color: #ffe787;
  height: 5rem;
  margin: 1rem 0 0 0;
}

.Frame2 {
  background-color: #a6e9ff;
  height:5rem;
  margin: 1rem 0 0 0;
}

@media screen and (max-width: 480px) {
  .Frame1 {
    order: 2;
  }
  .Frame2 {
    order: 1;
  }
}

解説

PCの場合は記述したとおりの順番で表示されます。
スマートフォンの場合は、以下のコードで、Frame2のほうがorder:1 となり手前に表示される動作となります。

@media screen and (max-width: 480px) {
  .Frame1 {
    order: 2;
  }
  .Frame2 {
    order: 1;
  }
}

実行結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
スマートフォンとPCの場合で枠の順番を入れ替える:画像1

ウィンドウ幅を狭めるか、シミュレーターを実行してスマートフォン表示に切り替えます。水色の枠が先に表示される状態に変わりました。
スマートフォンとPCの場合で枠の順番を入れ替える:画像2

枠の順番をPCとスマートフォンで入れ替えることができました。

スマートフォン表示をデフォルトにしたい

ダストン

追加の質問: スマートフォンの表示をデフォルトにしたいです。

希望の動作になりました。良いと思うのですが、スマートフォンの表示のほうをデフォルトにしたいです。どう書き換えればよいですか？

以下のコードに変更します。
HTMLの枠の順番はスマートフォンの並びをデフォルトにします。

flex-order-s.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-order-s.css" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
</head>
<body>
  <h1>PCとスマートフォンで枠の順番を入れ替えるデモ</h1>

  <div class="ContentFrame">
    <div class="Frame1">スマートフォンの場合、先に表示されます。</div>
    <div class="Frame2">PCの場合、先に表示されます。</div>
  </div>
</body>
</html>

CSSのメディアクエリを min-width: 480px に変更します。

flex-order.css

h1 {
  font-size:1.8em;
}

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

.Frame1 {
  background-color: #ffb078;
  height: 5rem;
  margin: 1rem 0 0 0;
}

.Frame2 {
  background-color: #b0a7ff;
  height:5rem;
  margin: 1rem 0 0 0;
}

@media screen and (min-width: 480px) {
  .Frame1 {
    order: 2;
  }
  .Frame2 {
    order: 1;
  }
}

表示結果は下図です。
PCで表示した場合は、紫色の枠が上部に表示されます。
スマートフォンとPCの場合で枠の順番を入れ替える:画像3