You are here: Reference > CSS > properties > browser specific extensions > -moz-box-ordinal-group

-moz-box-ordinal-group property | -webkit-box-ordinal-group property

Browser support:
Sets the display order in which objects appear within a box.
Elements with a higher value are displayed after those with a lower value. The display order of the elements with the same group values depend on their source order.
Only works for elements in a box object. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).
You can get the same functionality with reordering the elements in your source code within the box.
JavaScript page for this property: MozBoxOrdinalGroup | webkitBoxOrdinalGroup. You can find other example(s) there.

Possible values:

 One of the following values: 
group (non-negative integer)
Integer, that indicates the ordinal group the element belongs to.
Takes the value of this property from the computed style of the parent element.
Default: 1.

Example HTML code 1:

This example illustrates the use of the -moz-box-ordinal-group and the -webkit-box-ordinal-group properties:
        .box {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            border: 5px solid red;
        .ordinal1 {
            margin: 5px;
            -moz-box-ordinal-group: 1;
            -webkit-box-ordinal-group: 1;
        .ordinal2 {
            margin: 5px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
    <div class="box">
        <div class="ordinal2">first in source with ordinal 2</div>
        <div class="ordinal1">second in source with ordinal 1</div>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content