css - 重新排序 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>

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

PS:[C] 我有一个固定的高度，假设是 50vh。

Answer 1

您不需要使用嵌套、推/拉或隐藏类。在较大的 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>

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

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