Question

我在bootstrap中的堆叠顺序有问题。我意识到已经提出类似的问题，并且应该使用它的推拉。但我无法让它发挥作用。

这是我使用的代码：

<div class="row">
  	<div class="col-xs-12 col-sm-6"> a </div>
  	<div class="col-xs-12"> b </div>
  	<div class="col-xs-12 col-sm-6"> c </div>
 </div>

我想要的是a，b和c在移动视图中按顺序在彼此之下，但在桌面视图中a和c应该在eachoter旁边，b应该在它们下面。

一个
b
Ç

a c
B'/ P>

Answer 1

这不是完全相同的事情，但它正在逼近......

Bootply ：http://www.bootply.com/D5AmKsc6aT

<强> HTML ：

<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="row">
      <div class="col-xs-12">A</div>
      <div class="col-xs-12">B</div>    
    </div>  
  </div>
  <div class="col-xs-12 col-md-6">C</div>
</div>

Answer 2

所需的html不多，它只是一个2列布局，每列50％。您不需要嵌套列。您不需要在非嵌套结构中指定col-xs-12 - 当它低于您的列类最小宽度时，内容为100％。

DEMO：http://jsbin.com/paqoke/2/edit

   <div class="row">

      <div class="col-sm-6">

         <p>A</p>

         <p>B</p>

      </div><!--/.col-*-6-->

      <div class="col-sm-6">
          C
      </div><!--/.col-*-6-->

   </div><!--/.row-->

</div><!--/.container-->

Answer 3

可悲的是，推/拉不会帮助你，因为你不能跳过一个专栏。您将不得不复制一些内容（我在此示例中使用了col-c）并使用bootstraps hidden-xs和visible-xs帮助程序类在适当的设备上显示/隐藏。

<div class="container">
  <div class="row">
    <div class="col-sm-6 bg-success"> a </div>
    <div class="hidden-xs col-sm-6 bg-info"> c desktop</div>
    <div class="col-xs-12 bg-warning"> b </div>
    <div class="visible-xs col-xs-12 bg-info"> c mobile</div>
  </div>
</div>

DEMO：http://www.bootply.com/SW2ygwLVNY

另外值得注意的是，如果您已声明另一个网格类，则不必声明col-xs-12 ，因为它是默认的xs宽度。（即col-sm-6在xs时默认为col-xs-12。）

在bootstrap中堆叠顺序

3 个答案: