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以下的引导程序中的某个宽度之后。

我希望各列按此顺序显示> 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/

Answer 2

外部容器col-md-8和col-md-4使得无法使用https://getbootstrap.com/docs/4.0/layout/grid/#order-classes来按照您想要的方式对其进行重新排序

您可以hide并用两个外部容器显示第三个容器，仅针对狭窄的设备宽度，并以正确的顺序排列6个元素（这很容易，但很不好，因为您要重复自己的操作）。 / p>

Answer 3

我不确定您的实际要求是什么。您可以尝试以下引导结构来正确获得此顺序。 Fiddle goes here

.row {
 background: #f8f9fa;
 }

 .row > div {
  border: solid 1px #6c757d;
  }

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

3 个答案: