Responsive Order

The responsive order utilities set the CSS order property scoped to a specific breakpoint. Apply them to flex children inside a wf-row to rearrange visual order without changing the DOM — useful for content-first layouts on mobile or feature-priority reordering on desktop. Values run from 1 to 5 ; lower numbers appear first.

Desktop Reorder

Rearrange Columns on Screen

Three columns in DOM order A → B → C. On desktop, wf-screen-order-* rearranges them visually to B → C → A. Resize the preview below desktop width to see the natural DOM order restored.

screen

<div class="wf-row ...">
  <div class="wf-column wf-screen-order-3">A</div>
  <div class="wf-column wf-screen-order-1">B</div>
  <div class="wf-column wf-screen-order-2">C</div>
</div>

Mobile Reorder

Content-First on Mobile

Sidebar is first in the DOM but should appear below the main content on small screens. wf-mobile-order-1 on the content column and wf-mobile-order-2 on the sidebar swaps them at mobile and phone widths. Drag the panel to a wider size to see the original DOM order.

screen

<div class="wf-row ...">
  <div class="wf-column wf-screen-3 wf-mobile-order-2">Sidebar</div>
  <div class="wf-column wf-screen-7 wf-mobile-order-1">Main Content</div>
</div>

Class Reference

All modifier classes available on .wf-{size}-order-{value}

Class Name	Type	Description
wf-screen-order-*	Responsive	Sets order on desktop screens (≥ 1280px): 1 , 2 , 3 , 4 , 5 .
wf-tablet-order-*	Responsive	Sets order on tablet (992–1279px): 1 , 2 , 3 , 4 , 5 .
wf-mobile-order-*	Responsive	Sets order on mobile and phone (≤ 991px): 1 , 2 , 3 , 4 , 5 .
wf-phone-order-*	Responsive	Sets order on phone only (≤ 671px): 1 , 2 , 3 , 4 , 5 .