CSS3 box-ordinal-groupProperty


Example

The display order of the child elements of a specified box:

.box
{
display:-ms-flexbox; /* Internet Explorer 10 */
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
border:1px solid black;
}
.ord1
{
margin:5px;
-ms-flex-order:1; /* Internet Explorer 10 */
-moz-box-ordinal-group:1; /* Firefox */
-webkit-box-ordinal-group:1; /* Safari and Chrome */
box-ordinal-group:1;
}
.ord2
{
margin:5px;
-ms-flex-order:2; /* Internet Explorer 10 */
-moz-box-ordinal-group:2; /* Firefox */
-webkit-box-ordinal-group:2; /* Safari and Chrome */
box-ordinal-group:2;
}

Try it Yourself »

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Currently, mainstream browsers do not support the box-ordinal-group property.

Internet Explorer 10 supports this via the private property ms-flex-order.

Firefox supports this through the private property -moz-box-ordinal-group.

Safari and Chrome support it through the private property -webkit-box-ordinal-group.

Note:Internet Explorer 9 and earlier IE versions do not support flexbox.

Attribute Definition and Usage Instructions

The box-ordinal-group property specifies the display order of the child elements of a box.

Elements with a lower value are displayed before elements with a higher value.

Note:Elements with the same group value are displayed in their source order.

Default Value: 1
Inherited: no
version: CSS3
JavaScript Syntax: object.style.boxOrdinalGroup=2

Syntax

box-ordinal-group: integer;

Value Description
integer An integer indicating the display order of the child elements.
other extensions