order Property in Flexbox – How to Reposition Flex Item

order changes a flexible item's default order (arrangement).

In other words, order allows you to reposition a flexbox's item without altering your HTML code's layout.

Here's an example:

<ul style="display: flex; flex-direction: column">
  <li style="order: 6">1</li>
  <li style="order: 4">2</li>
  <li style="order: 1">3</li>
  <li style="order: 7">4</li>
  <li style="order: 2">5</li>
  <li style="order: 5">6</li>
  <li style="order: 3">7</li>
</ul>

Try Editing It

The HTML snippet above used the order property to change the unordered list's arrangement.

So, instead of the following order:

• 1
• 2
• 3
• 4
• 5
• 6
• 7

The browser will display this:

• 3
• 5
• 7
• 2
• 6
• 1
• 4

Use the order property with caution, as it prevents screen readers from accessing the correct reading order of an HTML document. Only use it if it is super important to use CSS to change the HTML code's layout.

But in most cases, it is best to rearrange the HTML code directly rather than using CSS.

note

The style="value" syntax, in the HTML snippet above, is the inline CSS technique for styling HTML elements.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter