Ich versuche das zu benutzenCSS-Modul für flexibles Box-Layout um die Reihenfolge zu steuern, in der Elemente gerendert werden. Hier ist ein Beispiel für HTML (undGeige):

<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;
}

Mein Ziel ist es, mit reinem CSS die Reihenfolge zu steuern, in der die Elemente # blue-objects und # green-objects angezeigt werden. Bisher konnte ich nur die horizontale Sortierreihenfolge steuern.

Die Spezifikation beschreibt dieorder Eigentumwie folgt:

Ein Flex-Container ordnet seinen Inhalt in der Reihenfolge der geänderten Dokumente an, beginnend mit der niedrigsten Ordnungszahl bis hinauf.

Ich hätte gedacht, dass dies bedeuten würde, dass die # grünen-Objekte vor den # blauen-Objekten erscheinen würden, wegen derorder Werte sind 1 und 2 ... aber es istfunktioniert nicht in Chrome 36, Firefox 31 oder IE 11.

Laut caniuse.com wird Flexbox von modernen Browsern gut unterstützt.Was mache ich falsch? Wie kann ich die Reihenfolge eines vertikal gestapelten Satzes von Elementen mithilfe des CSS-Moduls "Flexible Box Layout" steuern? Hilfe bei dieser Geige wäre sehr dankbar.