css - 重新排序引导列（嵌套）

Question

所以我在引导程序中有三列，如下

移动的：

[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>

我已经使用隐藏类实现了它，但是有没有更好的方法来使用例如推/拉类来做到这一点？

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

Answer 1

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

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 中隐含了这一点，因此标记中不需要它。

相关：如何更改 Bootstrap 3 div 列顺序

Answer 2

试试这个小提琴...

.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>

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