Flex how to move an object to another line?

Question

css

There are elements on the page that are arranged in a row on the desktop. On the mobile version, one of the elements that is in the middle should be on a new line, how can you do this with 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

The simplest thing I saw was to give each block with an additional color. a wrapper so that the parent (container) can control the size on the grid:
On mobile order, in order to change the wrapper + block in places, using flex-basis: 50%(prescribed to the first two blocks on the top line) move the 3rd block to a new line, for container - if it all the same is the parent root, should be flex-wrap: wrap;
https://codepen.io/approximate_solution2k20/pen/OJNNxLm