A two-column card-based layout for desktop and mobile using flexbox
<p>I want to make a two column html structure like the following picture:</p>

<p><a href="https://i.stack.imgur.com/YDfUU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YDfUU.jpg" alt="enter image description here"></a></p>

<p>The numbers inside each box means the order of the <code>div's</code> in the html markup.</p>

<p>The challenge is that I want to have a different sort order on a mobile device. For example, on a mobile device, number 4 should be below number 1 without changing the html. I think using <code>flexbox</code> should be the best way to achieve this. But I couldn't make it work.</p>

<p>Using <code>floats</code> isn't the way, because at the first side when there is some space, the next <code>div</code> will automatic float to that side.</p>

<p>I also cannot make extra wrapper's for each column, because using <code>order</code> will not work then.</p>

<p>Does somebody has an idea?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
}
.row {
  display: inline-block;
  width: 100%;
}
.item {
  border: 1px solid #000;
  width: 50%;
  float: left;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
  &lt;div style="height:200px;" class="item"&gt;1&lt;/div&gt;
  &lt;div style="height:150px;" class="item"&gt;2&lt;/div&gt;
  &lt;div style="height:100px;" class="item"&gt;3&lt;/div&gt;
  &lt;div style="height:50px; float:right;" class="item"&gt;4&lt;/div&gt;
  &lt;div style="height:75px; float:right;" class="item"&gt;5&lt;/div&gt;
  &lt;div style="height:150px; float:right;" class="item"&gt;6&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>