Change div layout with CSS? (Alternating divs) - html

Question

I am writing a plugin for WordPress. The layout is as following, displayed in a horizontal row:
<div class="row">
<div class="thumbnail">
<div class="information">
</div>
The PHP-function alternates the divs so every other row is the opposite order, like so:
<div class="row">
<div class="information">
<div class="thumbnail">
</div>
This is all working out in a fullscreen page, but on smaller screen I would like to get the "row" displayed vertically non-alternating.
So I'd like to get the thumbnail displayed first, then the information for every row.
When adding the #media statements for the div to pop down, I get the wrong order due to the alternating divs like so:
1st thumbnail
1st information
2nd information
2nd thumbnail
So I wonder if it's even possible to change through CSS? Been trying a lot of different floats and n-th childs but I end up with the same results.
Here is a jsbin to show the layout I am using:
JSBIN

Answer 1

You can use order with a mediaquery or with a min-width to set a break point .
.row {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-wrap:wrap;
}
.information {
flex: 1;
padding: 5%;
min-width:250px;/* set a breakpoint at 500px where thumb is set at 50% */
}
.thumbnail {
flex: 1;
min-width: 50%;/* min-width will allow to spray on the whole line when alone */
background: teal;
}
#media screen and (max-width: 640px) {
.row:nth-child(odd) .thumbnail {
order:1;
}
}
<div class="row">
<div class="thumbnail">thumb</div>
<div class="information">information goes here</div>
</div>
<div class="row">
<div class="information">information goes here</div>
<div class="thumbnail">thumb</div>
</div>
<div class="row">
<div class="thumbnail">thumb</div>
<div class="information">information goes here</div>
</div>
min-width + order http://jsbin.com/xupurikuxu/1/edit?html,css,output
mediaquerie http://jsbin.com/senobugubi/1/edit?html,css,output