重新排序 bootstrap 列（嵌套）

Question

所以我在 bootstrap 中有三列，下面是

手机：

[A]
[C]
[B]

桌面：

[A][C]
[B]

以下是我的代码：

<div class="container">  
  <div class="row">
     <div class="content1 col-xs-12 col-md-6">
        A
       <div class="row">
          <div class="content2 col-xs-12 col-md-12 hidden-xs hidden-sm">
             B
          </div>   
       </div>
     </div>     
  <div class="content3 col-xs-12 col-md-6">
        C
  </div>
  <div class="content2 col-xs-12 col-md-12 hidden-md hidden-lg">
       B
  </div>          
</div>

我已经使用隐藏类实现了它，但是有没有更好的方法来实现它，例如使用 push/pull 类？

PS：我有一个固定的 [C] 高度，比如说 50vh。

Answer 1

试试这个 fiddle...

.content1{height:50vh !important;}

<div class="container">  
  <div class="content1 col-xs-12 col-md-6">
    A
  </div>     
  <div class="content3 col-xs-12 col-md-6">
    C
  </div>
  <div class="content2 col-xs-12 col-md-12">
    B
  </div>          
</div>

我认为它适用于两种尺寸（移动和桌面）。

Answer 2

您不需要使用嵌套，push/pull 或隐藏类。在较大的 md 宽度上使用 50% 宽度的列。

https://www.codeply.com/go/3APQ7tHCgS

<div class="container">
    <div class="row">
        <div class="content1 col-md-6">
            A
        </div>
        <div class="content3 col-md-6">
            C
        </div>
        <div class="content2 col-md-12">
            B
        </div>
    </div>
</div>

另外请注意，当使用较大的网格列时，col-xs-12 隐含在 Bootstrap 3 中，因此标记中不需要它。

相关：How do I change Bootstrap 3 div column order

重新排序 bootstrap 列（嵌套）

Reordering bootstrap columns(nested)

css

twitter-bootstrap

bootstrap-grid