積み上げ効果を維持しながら CSS 内のブロック要素を並べ替えるにはどうすればよいですか?

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

Web 開発では、Web ページ内の要素の順序を並べ替える必要がある場合があります。これは、position:Absolute のような面倒なメソッドに頼ることなく、CSS を使用して実現できます。ただし、表示の機能を維持するには: ブロック プロパティを考慮する必要があります。

問題ステートメント:

3 つのブロック要素 (ブロック A、ブロック B、およびブロック) を含む HTML コードを考えてみましょう。 C) 縦に配置。目標は、display: block.

コード スニペット:

<div>
<p>CSS を使用した解決策:<strong></strong></p>CSS メディア クエリは要素を変更する機能を提供します画面サイズに基づいた動作。この場合、order プロパティを使用して要素を再配置できます。<p></p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

order 値を設定することで、ソース コード内の要素の位置を変更せずに要素の表示順序を操作します。順序の値が小さいほど、要素は早く表示されます。

例:

  
    <title>Block Reordering</title>
    <style>
      @media only screen and (max-width: 480px) {
        #parent {
          display: flex;
          flex-flow: column;
        }
        #a {
          order: 2;
        }
        #c {
          order: 1;
        }
        #b {
          order: 3;
        }
      }
    </style>
  
  
    <div>この例では、ブラウザ ウィンドウの幅が以下の場合です。 480px の場合、ブロックの順序はブロック C、ブロック A、ブロック B に変わります。これにより、さまざまな画面サイズの表示: ブロック プッシュ効果が維持されます。<p></p>
</div>