Flexbox mixed flex direction without container

Question

I have a problem with flexbox on mobile.

There are three boxes which on desktop have flex-direction: row:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

On mobile I want to display box1 and box3 in the left column, and box2 on the right.

How can I do it without adding a container ?

Answer 1

Here is a possible solution. Unfortunately, you have to use max-height with the parent container.

body {
  display: flex;
}

div {
  background: yellow;
  height: 120px;
  margin: 5px;
  width: 120px;
}

@media (max-width: 500px) {
  body {
    align-content: flex-start;
    flex-flow: column wrap;
    max-height: 300px;
  }
  .box2 {
    order: 3;
    height: 250px;
  }
}

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>