有没有办法从灵活的盒子中打破单个子元素？

Question

场景：我有一个div#wrapper元素，其中包含以下css：

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

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

美丽。这是一个问题：我现在正在处理媒体查询，并且需要在＆lt; 800像素。具体来说，我需要在A节和C节下面移动B节并使其全宽。这是一个帮助解释的图形：

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

Answer 1

Flexbox规范不断变化，当前建议你可以使用flex container和row wrapping，设置部分宽度，使其中只有两个适合包装，并使用{{3将b部分放在最后：

order（在Windows上使用Chrome 22测试）