响应式两列布局，对块进行重新排序

Question

在移动版式上，按照重要性顺序，我有六个div，一个在另一个下面。在台式机上，我想重新排序商品。在下图中，移动布局在左侧，桌面布局在右侧。

六个项目的高度互不相关。该布局应可以在任何高度上使用。

我尝试了不同的解决方案。实现桌面布局最简单的方法是创建两个包装div。但这不允许在移动设备上有不同的顺序。

我试图将forced horizontal wrapping in flexbox调整为垂直。 answer for column breaks几乎可以使用，但是容器的高度需要固定。

我搜索了围带，不幸的是，it seems impossible to have more than one element in a grid area。

是否有一种无需使用Javascript即可解决此问题的方法？ （我们当前的解决方案涉及Javascript，但访问者可以注意到div的重新排列）。

Answer 1

您可以使用display: flex;并在手机上使用order属性。

检查此JSFiddle

Answer 2

• [flex需要高度来包装列，

• [grid要求将范围设置为inbricate元素，

• [column CSS不理解order ...

...也许这里还有float剩余

// set a random min-height on children 
for(let e of document.getElementsByClassName('element')) {
  e.style.minHeight = Math.floor(25 + Math.random() * 72) + 'px';
}

* {
  margin: 0;
  box-sizing: border-box;
}

/* reset breakpoint to your own value */
@media screen and (min-width: 568px) {
  div {
    width: 50%;
  }
  div:nth-child(odd) {
    float: left;
    clear: left;
  }
  div:nth-child(even) {
    overflow: hidden;
  }
}

/* demo purpose */
section {
  counter-reset: div;
}
div:before {
  counter-increment: div;
  content: "Div N°"counter(div);
}
div {
  border: solid;
  display:flex;
  align-items:center;
  justify-content:center;
}

<section>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</section>

即使那样，元素之间也会出现间隙，当跟随非浮动元素时，float总是会中断一行。

砌体脚本可以是一个选项，也可以是JavaScript来对height进行排序，因此可以将flex列放在一边使用。