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