Адаптивный макет flexbox: изменение порядка элементов

Question

Я пытаюсь создать адаптивный макет, как показано на рисунке, слева будет мобильный, справа рабочий стол.Это было бы относительно легко с помощью flexbox, если бы я мог установить фиксированную высоту для оболочки, но поскольку содержимое динамическое, это невозможно.

Другим решением было бы использование абсолютного положения на элементе C, но это выглядит очень странно, я надеюсь найти более элегантное решение.

Вот структура для кода:

.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

Редактировать: это попытка, поскольку я неправильно понял вопрос ОП.Мой ответ имеет .wrapper height.

Решение, использующее flex со следующими свойствами:

• заказ
• flex-based

Этот код применяется для макета вашего рабочего стола:

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

Answer 2

Вы можете достичь этого, используя 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>

Рабочая скрипка здесь