CSS のみを使用して 2 つの DIV の順序を入れ替えるにはどうすればよいですか?

純粋な CSS を使用した DIV 位置の交換

レスポンシブ デザインでは、要素を動的に配置することが重要な場合があります。純粋に CSS を通じて 2 つの div の位置を交換する方法を探している場合は、同様のクエリからインスピレーションを得た解決策を次に示します:

元の構造:

<div>

望ましい結果:

「second_div」を持つHTML を変更せずに「first_div」の前に表示します。

解決策:

必要なメディア クエリをターゲットにするには、次のメディア クエリを実装します。 context:

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

説明:

• メディア クエリは最大幅 30em のデバイスをターゲットにしており、効果的に応答動作を有効にします。
• コンテナ要素内で、要素の配置をサポートする表示を「flex」に設定します。
• div を垂直方向に整列させるために、flex-direction を「column」として指定します。
• align-items: flex-start;要素がコンテナの先頭から開始されるようにします。
• div の位置を交換する鍵は、'order' プロパティを使用することです。設定順序により: 2; .first_div では、上位の他の要素の後に表示するようにブラウザに指示します。逆に、順序: 1; on .second_div は、.first_div の前に配置します。

このアプローチにより、CSS のみを使用して DIV の位置をシームレスに交換でき、最初のクエリに効果的に対処できます。

以上がCSS のみを使用して 2 つの DIV の順序を入れ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。