display: inline-block with alternate flows at low media width - css

Question

inline-block is the awesomest CSS tag ever. (That mean I only learned how it works last night. But then I threw away dozens of lines of HTML in preference to it.) It lets blocks reflow!
How do we write a banner that collapses into a different order when the screen is too small?
Big screen
[ A ][ B ][ C ]
Small screen?
[ C ]
[ B ]
[ A ]

Answer 1

You'll need some HTML and CSS trickery for the order switching, and then you could simply use media queries, with e.g.:
Demo Fiddle
HTML
<div>D</div>
<div>C</div>
<div>B</div>
<div>A</div>
CSS
div{
display:inline-block;
width:50px;
box-sizing:border-box;
height:50px;
width:25%;
border:1px solid black;
float:right;
}
#media (max-width: 700px) {
div {
display:block;
width:100%;
}
}
By having the elements in reverse order, then using float:right in your CSS, it places them in the order you anticipate- which is then ignored when they are given 100% width on screen resize- so they appear in the DOM (reverse) order.

Answer 2

Tx to whoever first mentioned 'flex'. I still like my previous float: solution, and SW4's will also work - IF you can find a way to float the divs together. But it's flex that allows you to re-order things.
Furtherless, #media & similar systems (such as 50%), reference the current page size (probably A4), not the current window size. I want to be so responsive that we behave like the mobile app, even if we're just a generic browser that someone scrunched up. So we need JS - the arch-nemesis of CSS - to trigger the changes.
The trick is display: flex; enables order:N;. That means switching the container to display: inline-block; will turn on document-order:
<script>
function resizeMe(win) {
var size = $(window).width();
var display = size > 600 ? 'inline-flex' : 'inline-block';
$('#flexMe').css({ display: display });
}
$(window).bind('resize', resizeMe);
$(window).bind('load', resizeMe);
</script>
<div id="flexMe" style="display: flex; width: 100%;" >
<div id="hdrLogo" class="hdrLogo hdrNv" style="order: 3; width: 375px;" >
Logo goes here
</div>
<div id="hdrAuth" class="hdrNv" style="order: 2; width: 375px;">
Login stuff goes here
</div>
<div id="hdrNavBar" class="hdrNv" style="order: 1; width: 375px;">
Record navigator goes here
</div>
</div>
That way the Record Navigator is either upper left, or closest to the records, and the Logo is either upper right, or farthest from the records.