Order

Use order utilities to control the visual order of items inside Flexbox and Grid containers.

They are useful when the source order should stay semantic, but the visual layout needs to change across screen sizes, layout patterns or interface states.

Common use cases include moving media before or after content, reordering sidebars, changing mobile and desktop layouts, promoting important cards, moving toolbar actions and building responsive split layouts.

Order utilities map directly to the native CSS order property.

Quick reference

Usage

Order utilities work on items inside Flexbox or Grid containers.

<div class="is-flex">
  <div class="order-2">First in source, second visually</div>
  <div class="order-1">Second in source, first visually</div>
</div>

Order changes visual placement only. It does not change the DOM source order.

Numeric order

Numeric order utilities let you assign explicit visual positions from 1 to 12.

<div class="is-flex gap-3">
  <div class="order-3">Third</div>
  <div class="order-1">First</div>
  <div class="order-2">Second</div>
</div>

Lower order values appear before higher order values.

Special order utilities

Special utilities handle common ordering patterns without requiring a specific number.

<div class="is-flex gap-3">
  <div>Default</div>
  <div class="order-first">First</div>
  <div class="order-last">Last</div>
</div>

Use order-none to return an item to the default order value.

<div class="is-flex gap-3">
  <div class="order-last md:order-none">
    Moves last on mobile, resets on medium screens.
  </div>

  <div>
    Regular content
  </div>
</div>

This is useful when the mobile layout needs a different visual order, but desktop should follow the natural document flow.

Mobile-first hero layout

Move the visual before the text on mobile, then restore the desktop layout on large screens.

<section class="is-grid grid-cols-1 lg:grid-cols-2 gap-4 align-items-center">
  <div class="order-2 lg:order-1">
    <h1>Build modern interfaces</h1>
    <p>Use order utilities to control responsive layout flow.</p>
  </div>

  <div class="order-1 lg:order-2">
    Preview
  </div>
</section>

Sidebar after content on mobile

Keep the main content first on small screens, then show the sidebar first on large screens.

<div class="is-grid grid-cols-1 lg:grid-cols-12 gap-4">
  <main class="order-1 lg:order-2 lg:col-span-9">
    Main content
  </main>

  <aside class="order-2 lg:order-1 lg:col-span-3">
    Sidebar
  </aside>
</div>

Toolbar actions

Move a primary action to the end of a toolbar.

<div class="is-flex align-items-center gap-2">
  <button class="button is-light">Filter</button>
  <button class="button is-light">Sort</button>
  <button class="button is-primary order-last">Create</button>
</div>

Featured card first

Use order-first to visually promote an item without moving it in the source.

<div class="is-grid grid-cols-1 md:grid-cols-3 gap-4">
  <article>Standard</article>
  <article class="order-first">Featured</article>
  <article>Standard</article>
</div>

Responsive

Order utilities include responsive variants for sm, md, lg and xl breakpoints.

Responsive variants are mobile-first. A base order applies immediately. A responsive order applies from its breakpoint and above.

<section class="is-grid grid-cols-1 lg:grid-cols-2 gap-4">
  <div class="order-2 lg:order-1">
    Content
  </div>

  <div class="order-1 lg:order-2">
    Visual
  </div>
</section>

Responsive class reference

Accessibility notes

Order utilities change visual order, not document order.

This matters for keyboard navigation, screen readers, focus order, reading order and form flow. Use order utilities for visual layout adjustments, but keep the source order logical and accessible.

For critical content, the DOM order should still make sense without CSS.

Notes

• Order utilities work on Flexbox and Grid items.
• Lower values appear before higher values.
• order-first moves an item before normal ordered items.
• order-last moves an item after normal ordered items.
• order-none resets the item to order: 0.
• Responsive variants follow FrontAlign's mobile-first breakpoint system.
• Avoid using order utilities to fix broken source structure.