Flex как перенести объект на другую строку?

Question

[Дмитрий]

На странице есть элементы, которые при десктопе расположены в ряд. При мобильной версии, один из элементов, который находится по середине, должен располагаться на новой строке, как при помощи flex, это можно сделать?

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

Answer 1

[approximate solution]

Самое простое что увидел - дать каждому блоку с цветом доп. обертку для того что бы родитель(контейнер) мог управлять размером по сетке:
На мобильных order для того что бы поменять обертку + блок местами, с помощью flex-basis: 50%(прописывается первым двум блокам на верхней строке)вынести 3й блок на новую строку, у container - если он все таки является корневым родителей, должно быть flex-wrap: wrap;
https://codepen.io/approximate_solution2k20/pen/OJNNxLm