css - 有没有办法将单个子元素从灵活的盒子中分离出来？

Question

场景：我有一个div#wrapper带有以下css的元素：

div#wrapper {
    display: box;
    box-orient: horizontal;
    width: 100%;
}

这个包装器包含三个子<section>元素，为了清楚起见，我们将它们称为 Sections A、B 和 C。所以这给我留下了这样的东西：

美丽的。问题是：我现在正在处理媒体查询，并且需要在 < 800px 时更改此布局。具体来说，我需要将 B 部分移动到 A 和 C 部分下方并使其全宽。这是一张有助于解释的图表：

问题：是否可以将单个子元素从其灵活的盒子中分离出来并以这种方式改变布局？

Answer 1

flexbox 规范不断变化，根据当前的建议，您可以使用带有row wrapping的flex 容器，设置部分宽度，以便其中只有两个适合包装器，并使用order将部分 b 放在末尾：

http://jsfiddle.net/LYnRf/（在 Windows 上使用 Chrome 22 测试）