# Order

Set the order for flex & grid items.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 29 · Edge 12 · Firefox 20 · Safari 9

| Class | Properties | Value |
|-------|------------|-------|
| `or:0` | order | `0` |
| `or:1` | order | `1` |
| `or:2` | order | `2` |
| `or:3` | order | `3` |
| `or:4` | order | `4` |
| `or:5` | order | `5` |
| `or:6` | order | `6` |
| `or:7` | order | `7` |
| `or:8` | order | `8` |
| `or:9` | order | `9` |
| `or:10` | order | `10` |
| `or:l` | order | `-9999` |
| `or:f` | order | `9999` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `or:0` | order | `0` |
| `or:1` | order | `1` |
| `or:2` | order | `2` |
| `or:3` | order | `3` |
| `or:4` | order | `4` |
| `or:5` | order | `5` |
| `or:6` | order | `6` |
| `or:7` | order | `7` |
| `or:8` | order | `8` |
| `or:9` | order | `9` |
| `or:10` | order | `10` |
| `or:l` | order | `-9999` |
| `or:f` | order | `9999` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `or:0` | order | `0` |
| `or:1` | order | `1` |
| `or:2` | order | `2` |
| `or:3` | order | `3` |
| `or:4` | order | `4` |
| `or:5` | order | `5` |
| `or:6` | order | `6` |
| `or:7` | order | `7` |
| `or:8` | order | `8` |
| `or:9` | order | `9` |
| `or:10` | order | `10` |
| `or:l` | order | `-9999` |
| `or:f` | order | `9999` |

### Negative Values

Double the hyphen to negate any value on the scale.

| Class | Properties | Value |
|-------|------------|-------|
| `or:0` | order | `0` |
| `or:1` | order | `1` |
| `or:2` | order | `2` |
| `or:3` | order | `3` |
| `or:4` | order | `4` |
| `or:5` | order | `5` |
| `or:6` | order | `6` |
| `or:7` | order | `7` |
| `or:8` | order | `8` |
| `or:9` | order | `9` |
| `or:10` | order | `10` |
| `or:l` | order | `-9999` |
| `or:f` | order | `9999` |