CSS: order (for flex items)

order

• Property order is for a item in Flexbox.
• It changes visual order of a flex item without changing HTML.

• Default for each item is 0.
• Negative values come before 0; positive after.

example

<div class="flexbox-order-966">
<div class="item-748">1</div>
<div class="item-748">2</div>
<div class="item-748">3</div>
<div class="item-748">4</div>
</div>

.flexbox-order-966 {
 display: flex;
 margin: 5px;
 border: dotted 3px red;
}

.item-748 {
 border: solid 1px blue;
 padding: 10px;
 margin: 5px;
}

.item-748:nth-child(2) {
 order: -1;
}