html - Flex 方向列，但其中两个子项彼此相邻，桌面顺序不同

Question

这是响应式设计的一部分，其中布局是 flex-direction: row 用于桌面，它必须是 flex-direction: column 用于移动设备。但是，one 和 three 这两个元素必须彼此相邻，而不是彼此重叠。 (您不能将它们单独放在一个容器中，因为那样会破坏桌面布局)。

有什么办法可以用 Flexbox 来实现吗？

.flex-container-desktop {
  display: flex;
  flex-direction: row;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.child {
  border: 1px solid red;
  margin-right: 10px;
  padding: 5px;
}

.two {
  order: 1;
}

.three {
  order: 2;
}

.one {
  order: 3;
}

<b>Desktop</b>
<div class="flex-container-desktop">
  <div class="child one-desktop">
Child 1
  </div>
  <div class="child two-desktop">
Child 2
  </div>
  <div class="child three-desktop">
Child 3
  </div>
</div>
<hr>
<b>Mobile</b>
<div class="flex-container">
  <div class="child one">
Child 1
  </div>
  <div class="child two">
Child 2
  </div>
  <div class="child three">
Child 3
  </div>
</div>

<br>
Child 3 and 1 should be next to each other only on mobile.

Answer 1

您可以使用 flex-direction: row 和媒体查询来做到这一点。因此，当它的移动 View 更改顺序并使用 flex: 0 0 100% 和其他两个元素 50% 使第一个元素占据全宽。设置 flex-wrap: wrap 也很重要，这样另外两个元素就会转到下一行。

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.child {
  border: 1px solid;
  flex: 1;
  padding: 5px;
}
@media(max-width: 768px) {
  .two {
    order: 1;
    flex: 0 0 100%;
  }
  .three {
    order: 2;
    flex: 0 0 50%;
  }
  .one {
    order: 3;
    flex: 0 0 50%;
  }
}

<div class="flex-container">
  <div class="child one">
    Child 1
  </div>
  <div class="child two">
    Child 2
  </div>
  <div class="child three">
    Child 3
  </div>
</div>