Адаптация трехколоночного макета на flexbox

Question

Прошу помочь разобраться а адаптацией стандартного трехколоночного макета с основным блоком в центре и двумя сайдбарами по бокам: https://jsfiddle.net/jkps6ugq/, размеры блоков фиксированные.

Необходимо, чтобы при уменьшении размера окна правый сайдбар залез под левый, а основной так и оставался на месте. По сути, внешний вид должен получиться как у двухколоночного макета, в левой части два блока один под другим, а в правой основной.

Пробовал играться с order, направлениями осей - ничего толкового не вышло. Возможно ли вообще такое сделать средствами flexbox (без JS и без абсолютного позиционирования)?

.main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #ccc;
  width: 600px;
  height: 400px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.green {
  background: green;
  width: 300px;
  height: 300px;
}

 .blue {
  background: blue;
  width: 100px;
  height: 100px;
}

<div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

Answer 1

Не знаю как на флексах, вот на гридах.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  height: 400px;
  width: 600px;
  grid-template-columns: 100px 300px 100px;
  background: #ccc;
  justify-content: space-around;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
            "a b c"
            ". b ."
            ". b .";
}

.red {
  grid-area: a;
  background: red;
}

.green {
  grid-area: b;
  background: green;
}

.blue {
  grid-area: c;
  background: blue;
}

@media (max-width: 600px) {
  .main {
    grid-template-areas: 
            "a b ."
            "c b ."
            ". b .";
  }
}

<div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

БЛОГ НА HUSL

Адаптация трехколоночного макета на flexbox

Ответы (1 шт):