CSS order Property

Definition and Usage

The order property sets how a flex or grid item is sorted in the visual layout. Items are laid out by ascending order value. When values match, HTML source order decides the tie.

Set it on the item, not the container. The default is 0. It does not change the DOM, tab order, or what screen readers announce — only how boxes are painted.

CSS Syntax

Example: order: -1; places that item before siblings still at 0.

Property Values

How to Use order

Make a flex or grid container, then assign integers to the items you want to move visually.

1. Set display: flex or display: grid on the parent.
2. Leave most items at the default 0.
3. Give earlier items a lower integer (often negative). Give later items a higher integer.
4. Check keyboard and screen-reader flow still make sense with the HTML source.

Live Preview

Three items in source order A, B, C. Change order on A and watch where it moves. B and C stay at 0.

CSS Examples

Each snippet uses only what order needs: a flex container and integer values on items. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
  }
  .a { order: 2; }
  .b { order: -1; }
  .c { order: 0; }
</style>

<section>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</section>

<style>
  section {
    display: flex;
  }
  .first { order: 1; }
  .mid { order: 2; }
  .last { order: 2; }
</style>

<section>
  <div class="first">First</div>
  <div class="mid">Mid</div>
  <div class="last">Last</div>
</section>

<style>
  main {
    display: flex;
  }
  article { order: 2; flex: 1; }
  nav { order: 1; width: 100px; }
  aside { order: 3; width: 100px; }
</style>

<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>

Key Takeaways