Bootstrap/CSS - 如何安排移動上的2列

Question

首先，我使用Bootstrap。 我需要在手機上訂購2個批次。 這是它們是如何佈置在我的代碼：

<!--First col--> 
<div class="col-sm-6"> 
<!--Content--> 
</div> 

<!--Second col--> 
<div class="col-sm-6"> 
<!--Content--> 
</div> 

正如預期的那樣在移動第一欄將被放置在第二欄（塊）的頂部上。在更大的屏幕上，第一列將位於左側，第二列位於右側（行內區塊）。我想改變這兩個的cols的地方只爲更小的屏幕，使得第二山坳將是第一個山坳這樣前：

<!--Second col--> 
<div class="col-sm-6"> 
<!--Content--> 
</div> 

<!--First col--> 
<div class="col-sm-6"> 
<!--Content--> 
</div> 

在這種情況下，第二欄將上。第一關口上方一個更小的屏幕。我希望這隻適用於手機。 那麼我怎麼能做到這一點？解決方案或建議將非常有幫助。提前致謝。在移動試

Answer 1

使用媒體查詢本

div.md-right{ 
 
float:right 
 
} 
 
div.md-left{ 
 
float:left; 
 
} 
 

 
@media (max-width: 767px) { 
 
    div.md-right, 
 
    div.md-left{ 
 
    float:none; 
 
    width:100%; 
 
    } 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <!--First col--> 
 
     <div class="col-sm-6 md-right"> 
 
      <!--Content--> First col 
 
     </div> 
 

 
     <!--Second col--> 
 
     <div class="col-sm-6 md-left"> 
 
      <!--Content--> Second col 
 
     </div> 
 
    </div> 
 
</div>

你可以設定根據自己的需要

Answer 2

可以使用display:flex CSS屬性是相同的。 Demo

HTML

<div class="flex-wrap"> 
<!--First col--> 
<div class="col-sm-6 flex-item1"> 
<!--Content--> 
</div> 

<!--Second col--> 
<div class="col-sm-6 flex-item2"> 
<!--Content--> 
</div> 
</div> 

CSS

.flex-wrap { 
    display: flex; 
} 
.flex-item1 //First col{ 
    order: 1; 
} 
.flex-item2 //Second col{ 
    order: 2; 
} 
@media screen and (max-width: 676px) { 
    .flex-wrap { 
     flex-wrap: wrap; 
    } 
    .flex-item1 //First col - changed the position to 2{ 
     order: 2; 
     width: 100%; 
    } 
    .flex-item2 //Second col position changed to 2{ 
     order: 1; 
     width: 100%; 
    } 
} 

可以提到確切的手機與@media Screen (max-width:676px)

Answer 3

引導有自己的類來處理的順序確切交易的專欄隨你想要什麼。

http://getbootstrap.com/css/

搜索 「列順序」。

例如：

<!--Second col--> 
 
<div class="col-sm-6 col-sm-pull-6"> 
 
    <!--Content--> 
 
</div> 
 

 
<!--First col--> 
 
<div class="col-sm-6 col-sm-push-6"> 
 
    <!--Content--> 
 
</div>

在上面的例子中，我們是從 「移動第一」 的佈局工作。所以我們先把第二列，然後使用引導推拉類，我們可以重新安排在較高斷點的順序。鈮：我從行業專業人士那裏學到的一個很好的提示是，先從移動設備開始編寫您的「佈局」，然後按照您的方式進行操作。至少在大多數情況下。