CSS3 box-ordinal-group Property

Example

Specify the display order of the child element of a box:

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

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The box-ordinal-group property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-box-ordinal-group property.

Safari and Chrome support an alternative, the -webkit-box-ordinal-group property.


Definition and Usage

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

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

Note: The display order of the elements with the same group value depend on 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 that indicates the display order of the child elements