responsiveflex布局包装问题

Question

我遇到了一个特殊的响应式弹性布局问题 我的目标：

容器2可以具有静态 我已经测试了一些可能的解决方案：

• 将容器2放在桌面上
• 在桌面上设置容器2的绝对位置。

是否有更灵活的解决方案不使用浮动或绝对定位？

Answer 1

如果您在容器元素上有固定的高度，则可以使用Flexbox执行此操作。然后，您只需要使用媒体查询更改元素的顺序。

＆＃13;

＆＃13;

.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex-wrap: wrap;
}
.a {
  background: #2873FD;
}
.b {
  background: #C015FF;
}
.c {
  background: #15FF78;
}
@media(min-width: 480px) {
  .a, .c {
    order: 1;
    flex: 0 0 30%;
  }
  .b {
    order: 2;
    flex: 0 0 100%;
  }
}

@media(max-width: 480px) {
  .content > div {
    flex: 1;
  }
}

＆＃13;

<div class="content">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
</div>

＆＃13;

＆＃13;

＆＃13;