html - 是否可以在不使用多个媒体查询/元素来对 Bootstrap 中的嵌套列/行进行排序的情况下实现？

Question

这是我的页面结构

HTML

<div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12" style="height:80px">
          1st
        </div>
        <div class="col-md-12" style="height:50px">
          3rd
        </div>
        <div class="col-md-12" style="height:50px">
          5th
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-12" style="height:50px">
          2nd
        </div>
        <div class="col-md-12" style="height:40px">
          4th
        </div>
        <div class="col-md-12" style="height:90px">
          6th
        </div>
      </div>
    </div>
  </div>
</div>

我为它做了一个jsFiddle https://jsfiddle.net/ytke8mn3/

我用 1st,2nd,3rd,4th,5th,6th 标记了列

我面临的问题是在 992px 以下的 bootstrap 中将我的页面调整到一定宽度后。

我希望列按此顺序显示 > 1st,2nd,3rd,4th,5th,6th 而不是 1st 3rd 5th 2nd 4th 6th

如何实现。谢谢

Answer 1

我找到了适合我的东西，它非常适合我。到目前为止我很满意。它需要对 dom 元素进行一些重组(减少编写的代码)，但这没关系。

<div class="container" style="padding-top:20px">
  <div class="row">
    <div class="col-md-8" style="height:80px">1st</div>
    <div class="col-md-4" style="height:40px">2nd</div>
    <div class="col-md-8" style="height:40px">3rd</div>
    <div class="col-md-4" style="height:80px">4th</div>
    <div class="col-md-8" style="height:80px">5th</div>
    <div class="col-md-4" style="height:30px">6th</div>
  </div>
</div>

https://github.com/desandro/masonry

我不知道它是如何实现的，但它确实有效。下面是一个 jsfiddle

https://jsfiddle.net/p5u976mt/