Have a look at this page design of a site I own and run:
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
As you can see, this concerns a classic two-column layout. The order of things is important. For example, you can see directly next to the photo what specie this concerns.
I'm now coding a responsive design for this site, and facing a challenge. Imagine that page on a narrow smartphone viewport. The classic strategy would be to simply "stack" the right column below the left one and let users scroll vertically. However, this is far from ideal in terms of the ordering of elements. The 'specie' block would be way below the photo, users would first have to scroll through things like comments before they can see the relationship between the photo and the specie.
I'm trying to solve that, and this article which explains CSS's flexbox as a possible solution sounded very promising:
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
The idea here is that using CSS only, one can change the visual order of elements, exactly what I need. Unfortunately, since then I learned that the article uses the outdated spec, and that the new spec is barely supported by any browser:
http://css-tricks.com/old-flexbox-and-new-flexbox/
This kind of ruins it for me. Nevertheless, I'd still like to ask my question at the conceptual level:
All of the demos that I have seen regarding flexbox have markup as simple as this:
<div id="somecontainer">
<div id="child1"></div>
<div id="child2"></div>
</div>
Next, the container is declared to be a flexbox, direction vertical. And finally, an order is assigned to each child element. This allows for example child2 to be moved above child1, using a single CSS statement.
Now here's the question. What if the actual markup is more complex in the sense that there are additional hierarchies at play? An example:
<div id="somecontainer">
<div id="colmain">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
<div id="colside">
<div id="content4"></div>
<div id="content5"></div>
<div id="content6"></div>
</div>
</div>
As you can see, this markup has additional hierarchies, the actual content blocks to be reordered are not direct child elements of the highest level container. They are childs but not direct childs.
Could flexbox and the reordering of child elements work in such a scenario? Could for example "content5" be moved in between "content1" and "content2"?
Regardless of poor browser support, I'm trying to conceptually understand whether that would be supported. The reason I ask is because the additional column hierarchies are extremely common in markup and it would totally suck if flexbox reordering would work only on direct childs.