引導電網

Question

我使用的引導格如下：

<div class="row"> 
    <div class="col-md-6 col-sm-12"> Column A </div> 
    <div class="col-md-6 col-sm-12"> Column B </div> 
</div> 

這顯然表明A欄上right.When移動到小屏幕的左，列B這將是一個頂部和B下面。

有沒有辦法在較大的屏幕上保持A在左邊而B在右邊，但是讓B在小屏幕上位於頂部，A在下面？

謝謝。

Answer 1

您可以使用Bootstrap Push and Pull。

body, 
 
html { 
 
    padding-top: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-md-push-6"> 
 
     <div class="alert alert-info">B</div> 
 
    </div> 
 
    <div class="col-md-6 col-md-pull-6"> 
 
     <div class="alert alert-danger">A</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

<div class="row"> 
    <div class="col-lg-6 col-md-6 hidden-sm hidden-xs"> Column A </div> 
    <div class="col-md-6 col-sm-12"> Column B </div> 
    <div class="col-sm-12 col-xs-12 hidden-lg hidden-md"> Column A </div> 
</div> 

可以從B. 之後添加了重複的列隱藏的第一個A當屏幕SM或XS。 當屏幕是lg或md時隱藏第二個A.