Order

vel-src: flexbox.css

Utilities for controlling the order of flex and grid items.

Class	Properties
vel-order-first	order: -9999
vel-order-last	order: 9999
vel-order-none	order: 0
vel-order-1	order: 1
vel-order-2	order: 2
vel-order-3	order: 3
vel-order-4	order: 4
vel-order-5	order: 5
vel-order-6	order: 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>