引导电网

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.