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="xzwvy-flexbox-order">
<div class="xzwvy-item">1</div>
<div class="xzwvy-item">2</div>
<div class="xzwvy-item">3</div>
<div class="xzwvy-item">4</div>
</div>

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

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

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