响应式 flexbox 布局：重新排序元素

Question

我正在尝试实现如图所示的响应式布局，左侧是移动设备，右侧是桌面。如果我可以为包装器设置一个固定的高度，那么使用 flexbox 会相对容易，但是因为内容是动态的，所以这是不可能的。

另一种解决方案是在元素 C 上使用绝对位置，但这似乎很 hacky，我希望找到一个更优雅的解决方案。

这是代码的框架：

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

@media(min-width: 800px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}

.section-a {
  background: green;
  height: 200px;
}

@media(min-width: 800px) {
  .section-a {
    flex-basis: 33%;
  }
}

.section-b {
  background: yellow;
  height: 400px;
}

@media(min-width: 800px) {
  .section-b {
    flex-basis: 66%;
  }
}

.section-c {
  background: blue;
  height: 200px;
}

@media(min-width: 800px) {
  .section-c {
    flex-basis: 33%;
  }
}

<div class="wrapper">
  <div class="section section-a">A</div>
  <div class="section section-b">B</div>
  <div class="section section-c">C</div>
</div>

感谢您的帮助！

Answer 1

您可以使用grid 实现此目的。我已经简化了你的代码并删除了不需要的css

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}

.section {
  padding: 20px;
  display: flex;
  align-items: center;
}
.section-a {
  height: 50px;
  background-color: green;
}  
.section-b {
  grid-row: row1-start / row2-end;
  grid-column: 2/-1;
  background-color: yellow;
}
.section-c {
  background-color: blue;
  height: 180px;
}

<div class="wrapper">
  <div class="section section-a">A</div>
  <div class="section section-b">B</div>
  <div class="section section-c">C</div>
</div>

工作小提琴here

Answer 2

编辑：这是一种尝试，因为我误解了 OP 的问题。我的答案是给定的.wrapperheight。

使用具有以下属性的 flex 的解决方案：

• order
• flex-basis

此代码适用于您的桌面布局：

.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column wrap;
}

.section {
    width: 50%;
    border: 1px solid black;
    box-sizing: border-box;
}

.section-a {
    height: 25vh; // for example
}

.section-b {
    order: 3;
    flex-basis: 100%;
}

.section-c {
    flex-grow: 1;
}

<div class="wrapper">
    <div class="section section-a">A</div>
    <div class="section section-b">B</div>
    <div class="section section-c">C</div>
</div>