レスポンシブ デザインで CSS のみを使用して DIV の位置を交換するにはどうすればよいですか?

レスポンシブ デザインの CSS と DIV の位置を交換する

レスポンシブ デザインの領域では、Web サイトのレイアウトが多様な画面サイズに適応し、要素の位置は、調和のとれたユーザー エクスペリエンスを維持するために非常に重要です。ここで CSS が登場し、HTML を変更せずに div の場所を交換するソリューションを提供します。

最初、HTML 構造は単純に見えます:

<div>
<p>しかし、目標は逆転することです。 div は CSS のみで位置決めされ、最初の要素として「second_div」をレンダリングします。</p>
<p><strong>理想ソリューション</strong></p>
<p>芸術的なプログラマーは、「レスポンシブ デザインで要素を上から下に移動する最良の方法」という質問の下でのディスカッションで提示された独創的なアプローチを推奨しました。</p>
<p>このソリューションは CSS を採用しています。最新のブラウザをサポートするプロパティ。表示テクニックとフレックスボックスの順序を組み合わせて利用することで、動的な高さを損なうことなく要素を再配置できます。</p>
<pre class="brush:php;toolbar:false">@media (max-width: 30em) {

  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

この CSS コードは、垂直フレックスボックス レイアウトでコンテナ div を作成します。このコンテナ内では、「first_div」と「first_div」に順序プロパティが割り当てられます。 「second_div」の次数を高く設定すると、レンダリングされたレイアウトで効果的に「first_div」より前に表示されます。

Float に対する利点

フレックスボックスのアプローチは float ベースを超えます。特定のシナリオにおけるソリューション。複数の div を交換して垂直方向に積み重ねる必要がある場合、フレックスボックスはよりクリーンで予測可能な動作を提供します。

さらに、メディア クエリの使用により、位置の交換が特定の画面幅でのみ発生することを保証し、目的を絞った実装が可能になります。ウェブサイトのレスポンシブな性質に影響を受けます。