Skip to main content

​
Overview

Order utilities let you move individual flex items to the start or end of the visual line without changing DOM order. This is useful for responsive layouts where key content needs to appear first on smaller screens.
ClassCSS
.order-firstorder: -99999;
.order-lastorder: 99999;
Responsive variants are also shipped as order-first--on-* and order-last--on-*.

​
Order First

.order-first pulls an item to the very beginning of the flex line, regardless of its position in the HTML source. 
<div class="elementor-element flex gap-4">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4 order-first">
    02
  </div>
  <div class="card p-4">
    03
  </div>
  <div class="card p-4">
    04
  </div>
</div>

​
Order Last

.order-last pushes an item to the very end of the flex line. Combine with responsive variants to move items only at specific breakpoints. 
<div class="elementor-element flex gap-4">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4 order-last">
    02
  </div>
  <div class="card p-4">
    03
  </div>
  <div class="card p-4">
    04
  </div>
</div>

​
Best Practices

  • Prefer semantic markup order first, then use order helpers for targeted visual adjustments.
  • Use responsive order variants when the change only matters at one breakpoint.
  • Keep reordered items obvious in complex layouts so they are still easy to reason about.

Flex Wrap

Reordering often pairs with wrapped layouts

Justify Content

Control distribution after the order changes