CSS とメディア クエリのみを使用して HTML ブロックの順序を逆にするにはどうすればよいですか?

CSS の柔軟性によるブロック順序の反転

提供された HTML 構造を考慮すると、ブロックのプロパティを維持しながら、CSS のみを使用してブロック要素の順序を切り替えることができます。詳細な解決策は次のとおりです:

モバイル デバイス用の CSS メディア クエリ

モバイル デバイスのブロック順序を変更するには、デバイスの最大幅をターゲットとする CSS メディア クエリを使用します:

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
}

このメディア クエリは #blockC の順序を 1 に設定し、ページの最初のブロックにします。

フレックスボックス並べ替え用

フレックスボックスは、子要素をその場で並べ替えることができる CSS レイアウト モジュールです。

#parent {
  display: flex;
  flex-flow: column;
}

#blockA {
  order: 1;
}

#blockC {
  order: 2;
}

#blockB {
  order: 3;
}

#parent コンテナ内で、フレックスボックスを適用して、ブロックの垂直方向の配置を可能にします。 。次に、希望する順序に従って各ブロックの order プロパティを設定します。

実践例

JavaScript を使用した完全な例を次に示します。

  
    <title>Block Reordering Example</title>
    <style>
      @media only screen and (max-device-width: 480px) {
        #blockC {
          order: 1;
        }
      }

      #parent {
        display: flex;
        flex-flow: column;
      }

      #blockA {
        order: 1;
      }

      #blockC {
        order: 2;
      }

      #blockB {
        order: 3;
      }
    </style>
  
  
    <div><p>このコード スニペットは、画面サイズに基づいたブロック要素の並べ替え。ブラウザ ウィンドウのサイズを変更して、動作中のメディア クエリの効果を確認します。</p></div>

以上がCSS とメディア クエリのみを使用して HTML ブロックの順序を逆にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。