Order

The order property controls the visual order of flex and grid items. Items in a container are sorted by ascending order value and by their source code order. Items not given an explicit order value are assigned the default value of 0.

<div class="ch-order--[1-10]"></div>
<div class="[xs, sl, sm, md, lg]:ch-order--[1-10]"></div>

Accessibility consideration

Before using order, it's important to understand the implications it has on accessibility. It creates a disconnect between the visual presentation of the content and the DOM order.

Consider if you actually need order. If you do, try to use it sparingly, and read about the accessibility implications on MDN - Order.

We have a simple demo here.

---

Ordering flex elements

Below is an example of changing the order of flex child elements.

<div class="ch-display--flex ch-flex-direction--column md:ch-flex-direction--row ch-gap--2">
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--2">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 1</span>
    <h3>I'm a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--3">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 2</span>
    <h3>I'm a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--1">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 3</span>
    <h3>I'm a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

---

Ordering grid elements

Below is an example of changing the order of grid child elements.

<div class="ch-grid md:ch-grid-cols--2 lg:ch-grid-cols--3 ch-gap--2">
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--2">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 1</span>
    <h3>I'm a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--3">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 2</span>
    <h3>I'm also a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 ch-order--1">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 3</span>
    <h3>I'm a heading</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

---

Problematic navigation

Above we outlined the possible issues for accessibility this creates, but an actual demo might be useful. Below is an example of how order can create confusing experiences for users with low vision or who navigate via keyboard.

Try clicking this, pressing tab to navigate between the below input elements, and notice how the order doesn't match the visual layout. It's important to consider this as keyboard focus order and screen reader reading order usually follow DOM order, not visual order.

---

Ordering elements responsively

In the same way you'd use responsive classes anywhere else with Chassis, it's possible to order elements responsively for different layouts on different screen sizes.

Below is an example of items in a custom order at md and lg breakpoints, but displayed in their natural DOM order below the md breakpoint.

<div class="ch-grid sm:ch-grid-cols--2 md:ch-grid-cols--3 lg:ch-grid-cols--5 ch-gap--1">
  <div class="item-styles md:ch-order--5 lg:ch-order--3">Item 1</div>
  <div class="item-styles md:ch-order--3 lg:ch-order--5">Item 2</div>
  <div class="item-styles md:ch-order--4 lg:ch-order--4">Item 3</div>
  <div class="item-styles md:ch-order--2 lg:ch-order--1">Item 4</div>
  <div class="item-styles md:ch-order--1 lg:ch-order--2">Item 5</div>
</div>

---