Как отформатировать правильно блоки через flex?

Question

[ma4t]

Есть 5 элементов внутри блока.
Как сделать, чтобы при нужном мне разрешении, два элемента были на одной строке, третий элемент на 2-ой, и два последних на третьей строке? Если при разных разрешениях они меняют свою положение через Order относительно друг друга.

Т.е. я мог обернуть там где у меня по ДВА элемента в БЛОКИ и тогда было бы три строки , написал бы им column.
Но они меняют потом свое положение так, что мне тогда придется вытаскивать элемент из "парной обертки", а как это сделать не знаю.

Answer 1

[inkShio]

Каждому блоку задать стиль.

просто набросок, для примера. тут уже пишешь на флексах, что и как растянуть и кому какой ордер.

@media (width: 1024px) {
  .box-1,
  .box-2 {
    width: 50%;
  }
  .box-3 {
    width: 100%;
  }
  .box-4,
  .box-5 {
    width: 50%;
  }
}

@media (width: 768px) {
  .box-1 {
    width: 100%;
  }
  .box-2, .box-3, .box-4 {
    width: 33%;
  }
  .box-5 {
    width: 100%;
  }
}

Comments

[ma4t]

спасибо

[Ankhena]

ma4t, отмечайте решением ответы, приносящие пользу