仅使用 CSS Flexbox 控制垂直堆叠元素的顺序

我正在尝试使用CSS 灵活盒子布局模块 http://www.w3.org/TR/css3-flexbox/控制元素渲染的顺序。这是一些 HTML 示例（以及fiddle http://jsfiddle.net/jbeall/dnew63of/6/):

<div id='outer-container'>

    <div id='blue-objects' class='object-container'>
        <p>In here we have a number of blue things.</p>
        <p>The amount of content could be very small, or very large.</p>
    </div>

    <div id='green-objects' class='object-container'>
        <p>This is very similar to the blue objects block, in that the amount of content is unknown at design-time, and it could be very small or very large.</p>
        <p>It could be a complicated, nested set of child objects, although in this example there is nothing more than two &lt;p&gt; elements.</p>
    </div>
</div>

/* Started with a columnar layout as given by the Flexplorer: http://bennettfeely.com/flexplorer/ */
.outer-container {    
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;

}

.object-container {
    -webkit-flex: 1 auto;
    flex: 1 auto;
    border: 1px dotted black;
    padding: 0 10px;
    margin: 10px;
}

#blue-objects {
    order: 2;
    font-weight: bold;
}

#green-objects {
    order: 1;
    font-style: italic;
}

我的目标是能够使用纯 CSS 来控制 #blue-objects 和 #green-objects 元素出现的顺序。到目前为止我所能完成的就是控制水平排序顺序。

该规范描述了order财产如下 http://www.w3.org/TR/css3-flexbox/#propdef-order:

Flex 容器将其内容布置在顺序修改的文档中 顺序，从编号最低的序数组开始向上。

我本以为这意味着 #green-objects 将出现在 #blue-objects 之前，因为order值分别为 1 和 2...但它是不工作 http://jsfiddle.net/jbeall/dnew63of/6/在 Chrome 36、Firefox 31 或 IE 11 中。

根据 caniuse.com 的说法，flexbox 在现代浏览器中拥有良好的支持。我究竟做错了什么？如何使用 CSS 灵活框布局模块控制垂直堆叠元素集的顺序？对于这个小提琴的帮助将不胜感激。

你应该打电话#outer-container并不是.outer-container在 CSS 文件中。然后flex模型将被触发。

要仅将蓝色对象放在最后，则只需应用：order:1;对它而言，对其他人没有任何影响：DEMO http://jsfiddle.net/dnew63of/8/

订单默认值为 0。