box-ordinal-group property CSS Reference



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;

Values

Value Description
integer An integer that indicates the display order of the child elements

Examples

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

Relative articles