CSS在移動設備上的一列，在桌面上的兩個

Question

我有一個頁面，包含移動設備上的1列和桌面上的2列。在移動設備上，我想遵循HTML中元素的順序（第1條，第2條，第3條，第4條）。

在桌面上，我想堆疊左欄中左欄的所有項目以及右欄欄中右欄的所有項目。

所以在下面的例子中，我想在左欄顯示：第一條，第3條，第4條而在右列第2條和第5條

要求：

• 文章的內容變化（不是所有的文章具有相同的高度）
• 我不想在右列& 5條2之間的間隙（或在左欄的文章之間的差距）所有邊界
• 必須被顯示
• 應該有左，右列
• 在HTML文章的順序之間的利潤率無法改變

@media all and (min-width: 600px) { 
 

 
    /* no idea what to do here */ 
 

 
} 
 

 
/* rest of styling */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    margin-bottom: .2em; 
 
} 
 
h1 + p { 
 
    margin-top: 0; 
 
} 
 
article { 
 
    border: 1px solid #CCC; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <article class="left-column"> 
 
    <h1>Article 1</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="right-column"> 
 
    <h1>Article 2</h1> 
 
    <p>Shown in right column</p> 
 
    </article> 
 
    <article class="left-column"> 
 
    <h1>Article 3</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="left-column"> 
 
    <h1>Article 4</h1> 
 
    <p>Shown in left column</p> 
 
    </article> 
 
    <article class="right-column"> 
 
    <h1>Article 5</h1> 
 
    <p>Shown in right column</p> 
 
    </article> 
 
</div>

更新

要清楚。我不希望得到的結果是這樣的： 但是這樣的：

Answer 1

嘗試使用引導。

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 1 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 2 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 3 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 4 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     article 5 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 2

添加CSS：

.wrapper { 
     margin-right: -15px; 
     margin-left: -15px; 
} 
.left-column, .right-column { 
     padding-right: 15px; 
     padding-left: 15px; 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
} 

@media only screen and (min-width:768px) { 
    .left-column, .right-column { 
     width: 50%; 
     float: left; 
    } 
    } 

Answer 3

有通過響應CSS部分閱讀W3Schools。

將行和列添加到您的HTML將闡明您的想法，並在較小的移動設備上調整爲全屏。

* { 
 
    box-sizing: border-box; 
 
} 
 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 
[class*="col-"] { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    .col-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-3 { 
 
    width: 25%; 
 
    } 
 
    .col-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-6 { 
 
    width: 50%; 
 
    } 
 
    .col-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-9 { 
 
    width: 75%; 
 
    } 
 
    .col-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-12 { 
 
    width: 100%; 
 
    } 
 
} 
 
h1 { 
 
    font-size: 1em; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    margin-bottom: .2em; 
 
} 
 
h1 + p { 
 
    margin-top: 0; 
 
} 
 
article { 
 
    border: 1px solid #CCC; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 1</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    <article class="col-6"> 
 
     <h1>Article 2</h1> 
 
     <p>Shown in right column</p> 
 
    </article> 
 
    </div> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 3</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    <article class="col-6"> 
 
     <h1>Article 4</h1> 
 
     <p>Shown in left column</p> 
 
    </article> 
 
    </div> 
 
    <div class="row"> 
 
    <article class="col-6"> 
 
     <h1>Article 5</h1> 
 
     <p>Shown in right column</p> 
 
    </article> 
 
    </div> 
 
</div>

Answer 4

我認爲所有的部分標註左柱應浮動左，右的所有列應該浮動的權利。您可能需要使用訂單才能獲得正確的訂單。然後將它們的寬度設置爲20％左右，並調整寬度和邊距值，直到它們正確放置。在移動視圖中，您可以保留浮動，但將所有寬度設置爲100％。並且不要忘記在之後清除所有的浮標。