CSS とメディア クエリのみを使用して HTML ブロック要素を並べ替えるにはどうすればよいですか?

CSS を使用したブロック要素の並べ替え

目標は、「プッシュ」効果を維持しながら、CSS のみを使用して HTML ブロック要素の順序を並べ替えることです。ディスプレイのブロック プロパティ。

モバイル用 CSS メディア クエリ最適化

モバイル ユーザーに対応するには、CSS メディア クエリを利用して、画面サイズに基づいてブロックの順序を変更できます。

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* Add CSS rules to change the order here */
   }
}

実装例

これを実証するには、次のことを考慮してください。例:

<div>
<p>次の CSS ルールをメディア クエリに追加すると、モバイル画面のブロックの順序を切り替えることができます:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
   #blockC {
      order: 1;
   }

   #blockA {
      order: 2;
   }

   #blockB {
      order: 3;
   }
}

Flexbox による順序操作

より汎用性の高いソリューションとして、Flexbox を利用できます。 property:

<div>
<pre class="brush:php;toolbar:false">@media screen and (max-width:300px) {
   #parent{
      display:flex;
      flex-flow: column;
   }

   #a{order:2;}
   #c{order:1;}
   #b{order:3;}
}

このアプローチでは、メディア クエリ内の order プロパティを変更することで要素の順序を変更できます。 flex-flow: columns プロパティにより、要素が小さな画面上で垂直にスタックされるようになります。