Reorder divs on media query with line break - html

Question

Here is a fiddle to essentially what I want to do - reorder divs using floating to float the middle div to the left on smaller screen sizes, and the outer two to the right.
Here's the current order:
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
In addition to what's already there, I want the outer two divs to sit underneath the middle div on the left. Essentially I want it to look like:
<div id='two'></div>
<div id='one'></div>
<div id='three'></div>
Where div two has display:block, and display one/three have display:inline-block - without changing the html.
Is this possible with just CSS?

Answer 1

This can be done:
<div class="boxes">
<div class="one box">Box One</div>
<div class="two box">Box Two</div>
<div class="three box">Box Three</div>
<div class="four box">Box Four</div>
</div>
CSS:
#media only screen and (max-width:768px) {
.boxes {
display:table;
width:100%;
}
.box {
display:block;
width:100%;
}
.three { display:table-caption; }
.four { display:table-header-group; }
.one { display:table-footer-group; }
}
Source: http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table (check the demo linked)