> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Order

> Use the shipped order helpers to move selected flex items to the start or end of the line.

export const OrderFirstDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.order-first</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={{
    ...blockStyle("#334155"),
    order: 0
  }}>01</div>
            <div style={{
    ...blockStyle("#2563eb"),
    order: -99999
  }}>02</div>
            <div style={{
    ...blockStyle("#0f766e"),
    order: 0
  }}>03</div>
            <div style={{
    ...blockStyle("#b45309"),
    order: 0
  }}>04</div>
          </div>
        </div>
      </div>
    </div>;
};

export const OrderLastDemo = () => {
  const blockStyle = bg => ({
    background: bg,
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  });
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.order-last</span>
        <div className="tw-demo-card">
          <div style={{
    display: "flex",
    gap: "1rem"
  }}>
            <div style={{
    ...blockStyle("#7c3aed"),
    order: 0
  }}>01</div>
            <div style={{
    ...blockStyle("#db2777"),
    order: 99999
  }}>02</div>
            <div style={{
    ...blockStyle("#0891b2"),
    order: 0
  }}>03</div>
            <div style={{
    ...blockStyle("#15803d"),
    order: 0
  }}>04</div>
          </div>
        </div>
      </div>
    </div>;
};

## 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.

| Class          | CSS              |
| -------------- | ---------------- |
| `.order-first` | `order: -99999;` |
| `.order-last`  | `order: 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.

<OrderFirstDemo />

```html theme={null}
<div class="elementor-element flex gap-4">
  <div class="card padding-4">
    01
  </div>
  <div class="card padding-4 order-first">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
  <div class="card padding-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.

<OrderLastDemo />

```html theme={null}
<div class="elementor-element flex gap-4">
  <div class="card padding-4">
    01
  </div>
  <div class="card padding-4 order-last">
    02
  </div>
  <div class="card padding-4">
    03
  </div>
  <div class="card padding-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.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Flex Wrap" href="/flexbox/wrap">
    Reordering often pairs with wrapped layouts
  </Card>

  <Card title="Justify Content" href="/flexbox/justify-content">
    Control distribution after the order changes
  </Card>
</CardGroup>