html - CSS 元素自定义顺序折叠的解决方案

Question

我有一组 div 元素需要以特定方式折叠，但我不确定该怎么做。这是未折叠的样子:

-------------
| 1 | 2 | 3 |
-------------
| 4 | 5 | 6 |
-------------

然后崩溃了:

---------
|   2   |
---------
| 1 | 3 |
---------
| 4 | 5 |
---------
|   6   |
---------

请注意，元素 2 位于顶部并变为全 Angular 。

因此，由于客户的制度要求(浏览器支持问题等)，我需要一个非 flexbox 和非 JS 的解决方案来解决这个问题。

底部很简单，但我无法弄清楚某种 float 情况或以其他方式使元素 2 停留在顶部并使其周围的元素折叠在其下方。我知道我可以将元素 2 从元素集合中拉出来，并将其绝对定位在父元素中，并在未折叠时将其覆盖到网格中，但是这样的解决方案中的定位在一个浏览器或另一个浏览器中总是有点不稳定，看起来有点不正常。

JS 并非完全不可能，但我真的不想，因为有很多其他 JS 与我正在开发的这个功能相关，我不想在那里增加复杂性。我会接受 flexbox 的答案，因为我可以说服客户这是解决问题的唯一方法。谢谢!

Answer 1

这是一个使用 wrapping flexbox 的解决方案，它使用 order属性以获得所需的布局。请注意使用 order: -1 将第二个元素置于顶部。剩下的就是摆弄宽度。

请看下面的演示:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div {
  background: aliceblue;
  border: 1px solid blue;
  width: 50%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper div:nth-child(2) {
  width: 100%;
  order: -1;
}

.wrapper div:last-child {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .wrapper div:nth-child(2) {
    order: initial;
  }
  .wrapper>div {
    flex: 1 1 33%;
  }
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>