Thank you so much. I don’t know whay but this isn;t working for me. I’m still getting my main flex item shuffling into second place immediately below my header when I shink my browser window’s width.
Originally I had my @media specs as follows:
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
After reading your advice, I tied:
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 2; }
.main { order: 3; }
.aside-2 { order: 4; }
.footer { order: 5; }
But the effect is the same; when I squish it up, so that there is only room for one flex item above another (nothing side-by-side), It puts header at top then ‘main’ then ‘aside-1’.
What I need is ‘header’ then ‘aside-1’ above ‘main’, when everything is squashed up narrow. What am I doing wrong?
I get the impression that the order property merely specifies the order that the items lay themselves out when no shuffling due to space-restriction has occurred.
Regards,
treehound
