Bootstrap - reorder cols

Question

我正在使用bootstrap，並希望僅在sm視圖中重新排列我的列。我知道bootstrap有拉和推的方法，但我有這個問題。

桌面

A | B | C | D

平板電腦

A | D

B | C

Mobile

A | B

C | d

我現在代碼：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3">A</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">B</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">C</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">D</div> 
</div> 
</div> 

Answer 1

克里斯蒂安，引導的推拉方法用於水平交換柱而不是垂直。正如你想垂直交換它們，所以你需要用CSS來實現這一點。

還有類似的問題，我希望this link將幫助您滿足您的要求。

Answer 2

謝謝Hemant，但我找到了更好的解決方案。使用flex。

還有就是我工作的例子:)

.row > div { 
 
    border:solid 1px gray; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    #col-a { 
 
    order:1; 
 
    } 
 
    #col-b { 
 
    order:3; 
 
    } 
 
    #col-c { 
 
    order:2; 
 
    } 
 
    #col-d { 
 
    order:4; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div> 
 
    </div> 
 
</div>