看看我拥有并运行的网站的这个页面设计：
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
如您所见，这涉及经典的两列布局。事情的顺序很重要。例如，您可以直接在照片旁边看到这所关注的物种。
我现在正在为这个网站编写一个响应式设计，并面临一个挑战。想象一下在狭窄的智能手机视口上的那个页面。经典的策略是简单地将右列“堆叠”在左列下方，让用户垂直滚动。然而，就元素的排序而言，这远非理想。“物种”块将位于照片下方，用户首先必须滚动浏览评论等内容，然后才能看到照片和物种之间的关系。
我正在尝试解决这个问题，这篇解释 CSS 的 flexbox 作为一种可能的解决方案的文章听起来很有希望：
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
这里的想法是只使用 CSS，可以改变元素的视觉顺序，这正是我所需要的。不幸的是，从那以后我了解到这篇文章使用了过时的规范，并且几乎没有任何浏览器支持新规范：
http://css-tricks.com/old-flexbox-and-new-flexbox/
这种对我来说是毁灭性的。尽管如此，我仍然想在概念层面提出我的问题：
我见过的所有关于 flexbox 的演示都有这样简单的标记：
<div id="somecontainer">
<div id="child1"></div>
<div id="child2"></div>
</div>
接下来，将容器声明为 flexbox，方向垂直。最后，为每个子元素分配一个顺序。例如，这允许使用单个 CSS 语句将 child2 移动到 child1 之上。
现在问题来了。如果实际标记更复杂，因为有额外的层次结构在起作用怎么办？一个例子：
<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>
如您所见，此标记具有额外的层次结构，要重新排序的实际内容块不是最高级别容器的直接子元素。他们是孩子，但不是直系孩子。
flexbox 和子元素的重新排序可以在这种情况下工作吗？例如，“content5”可以在“content1”和“content2”之间移动吗？
无论浏览器支持不佳，我都试图从概念上了解是否会支持。我问的原因是因为额外的列层次结构在标记中非常常见，如果 flexbox 重新排序仅适用于直接子级，那将是完全糟糕的。