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和媒体查询执行此操作.因此,当它的移动视图改变顺序并使第一个元素占用全宽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>