CSS のみを使用してブロック要素を並べ替えるにはどうすればよいですか?

CSS によるブロック要素の順序の切り替え

このシナリオでは、3 つのブロック要素が垂直に配置された HTML コードが与えられています。ブロック A 、ブロック B、およびブロック C。課題は、display:block を維持しながら、CSS のみを使用してこれらの要素を特定の順序で並べ替えることです。 property.

CSS メディア クエリを使用すると、画面の幅に基づいて要素に順序プロパティを選択的に適用できます。たとえば、iPhone アプリの広告をモバイル デバイスで最初に表示するシナリオを考えると、次のように実装できます。

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1; /* Move Block C to the top */
  }
}

画面幅が 480px 以下の場合、ブロック Cは、ブロック A とブロック B の上にレンダリングされます。これにより、ブロック要素の動作を損なうことなく、目的の並べ替えが実現されます。

モダンを使用したより詳細な例は次のとおりです。 CSS:

<div>

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a {
    order: 2;
  }
  #c {
    order: 1;
  }
  #b {
    order: 3;
  }
}

この例では、画面幅が 300px 以下に縮小されると、要素はブロック C、ブロック A、ブロック B のように並べ替えられます。フレックスボックス レイアウトにより、次のことが保証されます。要素はブロック状のままで、自然な高さと幅を尊重して垂直方向に積み重ねられます。

以上がCSS のみを使用してブロック要素を並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。