css - 响应式 flexbox 布局 : reordering elements

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>

工作 fiddle here