"Float" div in flexbox layout

Question

EDIT: The linked question "Is it possible for flex items to align tightly to the items above them?" is indeed very similar, and provides a lot of useful information. However, the solution I provide here is not mentioned in that question. Depending on your situation you'll have to decide what solution works best for you!

ORIGINAL QUESTION

I have an HTML/CSS layout that is based on flexbox. But I'm having problems positioning box "Three" on desktop. I want it to "float" up below box "Two".

This is what I currently have looks like

And here is the code for it:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}

.box {
  background-color: lightblue;
  width: calc(50% - 20px);
  margin: 10px;
}

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
  
  .one {
    order: 2;
  }
  
  .two {
    order: 1;
  }
  
  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left, and it should take up half of the available width. Box "Two" should always be displayed top-right, and box "Three" should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>

This is what I want on desktop browsers:

This is what I want (and currently already have) on mobile

The wanted layout on desktop is easily done using floats, like this https://jsfiddle.net/x9hhe6r3/ but with floats it's difficult to get right on mobile

---

Solution

I found a solution that works for me :D

So as I wrote in the original question I could easily solve it just using floats on desktop. But that didn't work for mobile since the boxes would end up in the wrong order. For mobile I needed flexbox, since that lets me re-order the content independently of the order the divs have in the HTML.

So, using @media I simply switch between float and flexbox!

This is the working solution:

.box {
  float: left;
  background-color: lightblue;
  width: calc(50% - 20px);
  margin: 10px;
}

@media (max-width: 600px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
  }
  
  .box {
    width: 100%;
  }

  .one {
    order: 2;
  }

  .two {
    order: 1;
  }

  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
  clear: both;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the
      largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left,
      and it should take up half of the available width. Box
      "Two" should always be displayed top-right, and box "Three"
      should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on
      top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and
      below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>

Answer 1

We can achieve the desired output by using following properties on your wrapper for larger screens:

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: /* TALLEST BOX HEIGHT */
}

max-height is possible in CSS as well as using JS.

I am aware of the flaws in media query as well. Will complete it within few hours.

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  background-color: lightblue;
  margin: 10px;
  width: 50%;
}

@media (min-width: 600px) {
  .wrapper {
    max-height: 340px;
  }
}

@media (max-width: 600px) {
  .box {
    width: 100%;
  }
  .one {
    order: 2;
  }
  .two {
    order: 1;
  }
  .three {
    order: 3;
  }
}

footer {
  background-color: lightpink;
}

<div class="wrapper">
  <div class="box one">
    <p>One</p>
    <p>
      This is the main content. This box will always be the largest (tallest) of them all.
    </p>
    <p>
      On desktop this should always be the only box to the left, and it should take up half of the available width. Box "Two" should always be displayed top-right, and box "Three" should always be displayed below box "Two".
    </p>
    <p>
      On mobile all boxes should stack vertically, with "Two" on top, then "One" and last (on the bottom) I want "Three"
    </p>
    <p>
      There is also a footer that needs to be full-width, and below all of these boxes ("One", "Two" and "Three")
    </p>
  </div>
  <div class="box two">
    <p>Two</p>
    <p>Top-right on desktop. Top (full-width) on mobile</p>
  </div>
  <div class="box three">
    <p>Three</p>
    <p>Below "Two" on desktop. Below "One" on mobile (full-width)</p>
  </div>
</div>
<footer>Footer content below boxes</footer>