# Order

Utilities for controlling the visual order of flex items without changing DOM order.

**Category:** Utilities
**CSS source:** `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/order.utilities.css`
**Repository source:** `src/utilities/order.utilities.css`
**Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-order--introduction

## Class reference

| Class | CSS declaration |
|---|---|
| `ux4g-order-first` | `order: -1` |
| `ux4g-order-last` | `order: 999` |
| `ux4g-order-0` | `order: 0` |
| `ux4g-order-1` | `order: 1` |
| `ux4g-order-2` | `order: 2` |
| `ux4g-order-3` | `order: 3` |
| `ux4g-order-4` | `order: 4` |
| `ux4g-order-5` | `order: 5` |

Responsive variants available (24 total). Pattern: `ux4g-{breakpoint}-...` where breakpoint is `sm`, `md`, `lg`, `xl`, or `2xl`.

## Usage

Use the documented variants and class names. If exact markup is still required after checking this page and the catalog, use the linked Storybook page as the final fallback.

## Usage

Use Order utilities to apply their named visual or layout behaviour directly to an element. Combine them with semantic component classes; do not create replacement CSS unless the documented utilities cannot meet the requirement.

## Reference paths

- Documentation: `https://doc.ux4g.gov.in/web/llms/utilities/order.md`
- Exact CSS: `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/order.utilities.css`

## Exact CSS

### https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/order.utilities.css

```css
/* =========================================
   ORDER UTILITIES
   Controls the visual order of flex items.
   Range: 0-5, first (-1), last (999)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px - 1439px (no query)
     Desktop XL (xl): >= 1440px
     Tablet (md): <= 1023px
     Mobile (sm): <= 767px
========================================= */

.ux4g-order-first { order: -1; }
.ux4g-order-last { order: 999; }
.ux4g-order-0 { order: 0; }
.ux4g-order-1 { order: 1; }
.ux4g-order-2 { order: 2; }
.ux4g-order-3 { order: 3; }
.ux4g-order-4 { order: 4; }
.ux4g-order-5 { order: 5; }

/* ================= XL 1440px - 1920px (Desktop XL) ================= */
@media (min-width: 1440px) and (max-width: 1920px) {
  .ux4g-xl-order-first { order: -1; }
  .ux4g-xl-order-last { order: 999; }
  .ux4g-xl-order-0 { order: 0; }
  .ux4g-xl-order-1 { order: 1; }
  .ux4g-xl-order-2 { order: 2; }
  .ux4g-xl-order-3 { order: 3; }
  .ux4g-xl-order-4 { order: 4; }
  .ux4g-xl-order-5 { order: 5; }
}

/* ================= MD 768px - 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-order-first { order: -1; }
  .ux4g-md-order-last { order: 999; }
  .ux4g-md-order-0 { order: 0; }
  .ux4g-md-order-1 { order: 1; }
  .ux4g-md-order-2 { order: 2; }
  .ux4g-md-order-3 { order: 3; }
  .ux4g-md-order-4 { order: 4; }
  .ux4g-md-order-5 { order: 5; }
}

/* ================= SM 320px - 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-order-first { order: -1; }
  .ux4g-sm-order-last { order: 999; }
  .ux4g-sm-order-0 { order: 0; }
  .ux4g-sm-order-1 { order: 1; }
  .ux4g-sm-order-2 { order: 2; }
  .ux4g-sm-order-3 { order: 3; }
  .ux4g-sm-order-4 { order: 4; }
  .ux4g-sm-order-5 { order: 5; }
}
```

## Accessibility notes

- Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility.
- Ensure color contrast meets WCAG 2.1 AA.
- Test responsive and RTL behavior where utility classes rely on logical properties.