In order to access this site you need to enable JavaScript!

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:

-moz-box-ordinal-group:

-webkit-box-ordinal-group:

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.

inherit

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:

<head>
    <style>
        .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;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="ordinal2">first in source with ordinal 2</div>
        <div class="ordinal1">second in source with ordinal 1</div>
    </div>
</body>