A two-column card-based layout for desktop and mobile using flexbox - html

Question

I want to make a two column html structure like the following picture:
The numbers inside each box means the order of the div's in the html markup.
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 flexbox should be the best way to achieve this. But I couldn't make it work.
Using floats isn't the way, because at the first side when there is some space, the next div will automatic float to that side.
I also cannot make extra wrapper's for each column, because using order will not work then.
Does somebody has an idea?
* {
box-sizing: border-box;
}
.row {
display: inline-block;
width: 100%;
}
.item {
border: 1px solid #000;
width: 50%;
float: left;
}
<div class="row">
<div style="height:200px;" class="item">1</div>
<div style="height:150px;" class="item">2</div>
<div style="height:100px;" class="item">3</div>
<div style="height:50px; float:right;" class="item">4</div>
<div style="height:75px; float:right;" class="item">5</div>
<div style="height:150px; float:right;" class="item">6</div>
</div>

Answer 1

The code below features:
A column-direction flex container
Flex items wrap at viewport height
On smaller screens (based on height or width), the fourth item moves to the second position in the visual order, and the items align in a single full-width column.
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
max-width: 100vw;
}
.item {
width: 45%;
margin: 5px;
border: 1px solid #000;
}
#media ( max-width: 500px ), ( max-height: 500px ) {
.row { flex-direction: row; }
.item { flex-basis: 100%; }
.item:nth-child(1) { order: -2; }
.item:nth-child(4) { order: -1; }
}
<div class="row">
<div style="height:200px;" class="item">1</div>
<div style="height:150px;" class="item">2</div>
<div style="height:100px;" class="item">3</div>
<div style="height:50px;" class="item">4</div>
<div style="height:75px;" class="item">5</div>
<div style="height:150px;" class="item">6</div>
</div>
jsFiddle