Docs / Order

Order

vel-src: flexbox.css

Utilities for controlling the order of flex and grid items.

ClassProperties
vel-order-firstorder: -9999
vel-order-lastorder: 9999
vel-order-noneorder: 0
vel-order-1order: 1
vel-order-2order: 2
vel-order-3order: 3
vel-order-4order: 4
vel-order-5order: 5
vel-order-6order: 6

Examples

Reordering

DOM 1 → order-3
DOM 2 → order-1
DOM 3 → order-2
example.html
<div class="vel-flex vel-gap-3">
  <div class="vel-order-3 vel-bg-danger vel-text-white vel-rounded-md" style="padding:10px 18px">DOM 1 → order-3</div>
  <div class="vel-order-1 vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 18px">DOM 2 → order-1</div>
  <div class="vel-order-2 vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 18px">DOM 3 → order-2</div>
</div>