order-first/last/none/1…12 — reorder flex & grid children visually. This family contains 15 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;
order-noneorder: 0;

Example#

example
html
<div class="flex">
  <button class="order-last">Save</button>
  <button>Cancel</button>
</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Keep DOM order semantic; use order only visually
  • order-first/-last beat numeric ordering for common cases

Common mistakes#

  • Reordering breaks keyboard tab order — screen readers and keyboards follow DOM

utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox