HTMLコンポーネントの表示順序を再編成するCSSを記述する方法はありますか？

Question

モバイル版/タブレット版のビューがデスクトップビューと異なる応答性の高いサイトでDIVを再注文しています。

メンテナンス可能なCSSを記述する方法はありますか？HTML DIVの表示順序を再整理できますか？例えば、以下のコードでは、div要素は、デスクトップデバイス上でどのように見えるかの順序を

を制御します。

<div class="container"> 
    <div class="row1"> 
     <div class="col1A">Sample content</div> 
     <div class="col2A">Sample content</div> 
     <div class="col3A">Sample content</div> 
    </div> 
    <div class="row2"> 
     <div class="col1B">Sample content</div> 
     <div class="col2B">Sample content</div> 
     <div class="col3B">Sample content</div> 
    </div> 
</div> 

はしかし、モバイル/タブレットビューのために、私は、CSSを使用して、異なる順序でdivを表示したいです

表示ROW2、その後ROW1 col2B
、col1A
その後ROW1、col3A
その後ROW2、col1B

：下記の例のように10

これはCSSで可能ですか？

Answer 1

は、CSSでのモバイルデバイスを検出するための画面サイズを設定し、以下の

@media screen and (max-width: SIZE) { 
    .row2{ 
     display: flex; flex-flow: column; 
    } 

    .col1B{ 
     order: 1; 
    } 

    .col2B{ 
     order: 2; 
    } 

    .col3B{ 
     order: 3; 
    } 
} 

を追加し、あなたのニーズに

<div class="row2"> 
     <div class="col1B">Sample content</div> 
     <div class="col2B">Sample content</div> 
     <div class="col3B">Sample content</div> 
    </div> 

変更order: 1/2/3; div要素にクラスを追加します。

Answer 2

概念の証明として、flex CSSプロパティを使用して、要素が視覚的にどのようにレンダリングされるかを並べ替えることができます。

あなたの例では、子要素を単一のコンテナ に入れておき、orderプロパティを使用して注文を制御することができました。

小さな画面表示で一部の項目を非表示にする場合は、特定の項目にdisplay: noneを使用します。

注：ワイドスクリーンの場合、項目を2行に見せるにはCSSルールが必要です。 （必要なものを指定してください）

これをメディアクエリと組み合わせると、実行可能なソリューションを得ることができます。

.container { 
 
    display: flex; 
 
    flex: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    border: 1px dotted blue; 
 
} 
 
.container div { 
 
    text-align: center; 
 
    padding: 10px; 
 
    border: 1px dotted gray; 
 
    width: auto; 
 
} 
 
.col1A { 
 
    order: 2; 
 
} 
 
.col2A { 
 
    display: none; 
 
} 
 
.col3A { 
 
    order: 3; 
 
} 
 
.col1B { 
 
    order: 4; 
 
} 
 
.col2B { 
 
    order: 1; 
 
} 
 
.col3B { 
 
    display: none; 
 
}

<div class="container"> 
 

 
    <div class="row1 col1A">Sample content 1A</div> 
 
    <div class="row1 col2A">Sample content 2A</div> 
 
    <div class="row1 col3A">Sample content 3A</div> 
 

 
    <div class="row2 col1B">Sample content 1B</div> 
 
    <div class="row2 col2B">Sample content 2B</div> 
 
    <div class="row2 col3B">Sample content 3B</div> 
 

 
</div>

次の3つの要素の2つの行をシミュレートしたい場合は、まだいくつかの調整とflexを使用することができます。以下は役に立つかもしれません。

.container { 
 
    display: flex; 
 
    flex: center; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    border: 1px dotted blue; 
 
    padding: 20px 0; 
 
} 
 
.container .row1 { 
 
    margin-bottom: 20px; 
 
} 
 
.container div { 
 
    text-align: center; 
 
    padding: 10px; 
 
    border: 1px dotted gray; 
 
    flex-basis: calc(33% - 20px); 
 
} 
 
.col1B { 
 
    background-color: yellow; 
 

 
}

<div class="container"> 
 

 
    <div class="row1 col1A">Sample content 1A</div> 
 
    <div class="row1 col2A">Sample content 2A</div> 
 
    <div class="row1 col3A">Sample content 3A</div> 
 

 
    <div class="row2 col1B">Sample content 1B</div> 
 
    <div class="row2 col2B">Sample content 2B</div> 
 
    <div class="row2 col3B">Sample content 3B</div> 
 

 
</div>