css - Bootstrap 3 : Column Ordering

Question

我有这三列。在中等屏幕中，它应该是这样的:A 列 (col-md-6) 位于顶部，B 列 (col-md-6) 位于 A 列旁边，C 列 (col-md-12) 位于列下方A和B。

像这样:

我在处理这种排序时遇到了问题。这是我当前的代码:

<div class="container">
   <div class="row">
    <div class="col-md-12">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
      </div>

      <div class="content3 col-xs-12 col-md-12">
        12-Col-[Medium] C
      </div>

      <div class="content2 col-xs-12 col-md-6">
        6-Col-[X-Small] B
      </div>
    </div>
  </div>
</div>

目前看起来是这样的:

我查看了 Bootstrap 文档并使用了列推/拉。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
      </div>

      <div class="content3 col-xs-12 col-md-12 col-md-push-6">
        12-Col-[Medium] C
      </div>

      <div class="content2 col-xs-12 col-md-6 col-md-pull-12">
        6-Col-[X-Small] B
      </div>
    </div>
  </div>
</div>

但是这个方法好像把布局弄乱了。

我的代码中是否遗漏了什么？它没有按我的预期进行。

Answer 1

您可以像这样将您的 row 类相互嵌套:

<div class="container">
   <div class="row">
      <div class="content1 col-xs-12 col-md-6">
        6-Col-[X-Small] A
        <div class="row">
           <div class="content3 col-xs-12 col-md-12">
             12-Col-[Medium] C
           </div>
        </div>
      </div>
      <div class="content2 col-xs-12 col-md-6">
        6-Col-[X-Small] B
      </div>
   </div>
</div>

然后在嵌套的 .content3 元素上设置自定义媒体查询

@media(min-width: 992px){
    .content3{
        width: calc(100% * 2);
    }
}

上面使用与 Bootstrap 的 .col-md-12 相同宽度的断点。在该阈值处，.content3 的宽度变为其嵌套 DIV 的两倍。

Fiddle