Flexbox 2 column problem

by dahousecat

HTML

<div class="container">

    <div class="box box1">
      <h1>The title</h1>
    </div>
    <div class="box box2">
      <img src="http://www.felixeve.co.uk/placeholder/?size=200x600" />
    </div>
    <div class="box box3">
        If this is viewed in Firefox then when the browser is over 600px wide there will be two columns.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien enim, consequat eget nibh ornare, porttitor posuere arcu. Donec commodo ac nibh eget mollis. Duis gravida non turpis non vulputate. Vestibulum tincidunt nulla pulvinar, consectetur ligula eu, ullamcorper nulla. Quisque nec nulla sit amet elit ultrices laoreet. Vestibulum efficitur posuere elit non dapibus. In et felis sit amet tellus luctus mollis id lobortis erat. Phasellus ultrices imperdiet lectus, eu ultrices augue venenatis sit amet.
    </div>

  </div>

CSS

.box1,
    .box2,
    .box3 {
      width: 100%;
      text-align: center;
    }

    @media (min-width: 600px) {
      .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
      }
      .box {
        width: 50%;
      }
      .box1 {
        order: 1;
      }
      .box2 {
        order: 3;
        page-break-before: always;
      }
      .box3 {
        order: 2;
      }
    }