有沒有寫CSS的方法，可以讓你重新組織HTML組件的顯示順序？

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，col2B
然後ROW1，COL1A
然後ROW1，col3A
然後ROW2，col1B

這可能使用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

<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;您的需求。

Answer 2

作爲一個概念驗證，您可以使用flex CSS屬性重新排列元素的可視化呈現方式。

在您的示例中，我必須將子元素保存在一個容器中，然後我可以使用order屬性控制訂單。

如果要在小屏幕視圖上隱藏一些項目，請在特定項目上使用display: none。

注意：對於寬屏幕，您需要一些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>

如果要模擬三種元素的兩排，你仍然可以使用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>