Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Check out the new Pro Zone

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.

Support CodeSweetly