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

Question

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

另一种解决方案是在元素C上使用绝对位置，但这看起来非常h​​acky，我希望找到更优雅的解决方案。

以下是代码的框架：

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助！

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

工作小提琴here

Answer 2

  

编辑：这是一次尝试，因为我误解了OP的问题。我的回答是.wrapper height。

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

• order
• flex-basis

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;