Ordering Flex Items with the Order Property

If you’ve ever wished you could shuffle things around on a webpage without touching the HTML, the order property in Flexbox is about to become your new best friend.

In this beginner-friendly guide, you’ll learn how to:

• Turn a simple list of items into a flexible row
• Change the visual order of items using just CSS
• Create different layouts for mobile and desktop using order

You don’t need any prior coding experience. We’ll go step by step, with small code examples you can copy, paste, and tweak.

---

What is Flexbox and the order Property?

Flexbox (short for flexible box layout) is a layout system in CSS that makes it easier to arrange items in a row or column.

When you use Flexbox, each child element inside a flex container becomes a flex item. The order property lets you control where each flex item appears along the main line (row or column).

• By default, items appear in the order they are written in the HTML.
• With order, you can move them around visually without changing the HTML.

Think of it like reordering books on a shelf: the HTML is the list of books, and order is how you choose to arrange them on the shelf.

---

Step 1: Create a Simple Flex Container

Let’s start with a very simple example.

HTML

<!-- Example 1: Basic flex container -->
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

/* Make the parent a flex container */
.container {
  display: flex;        /* Turn on Flexbox */
  gap: 10px;            /* Add some space between items */
}

/* Style for each flex item */
.item {
  background: lightblue;
  padding: 10px;
  border: 1px solid #999;
}

What you’ll see:

• Three boxes in a row: Item 1, Item 2, Item 3.
• They appear in the same order as in the HTML.

At this point, we haven’t used order yet. This is just our starting point.

---

Step 2: Change the Order of Flex Items

Now, let’s rearrange the items without touching the HTML.

HTML (unchanged)

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

CSS with order

.container {
  display: flex;
  gap: 10px;
}

.item {
  background: lightblue;
  padding: 10px;
  border: 1px solid #999;
}

/* Set custom order values */
.item-1 { order: 3; }  /* Show this third */
.item-2 { order: 1; }  /* Show this first */
.item-3 { order: 2; }  /* Show this second */

What you’ll see now:

• The visual order becomes: Item 2, Item 3, Item 1.
• But in the HTML, the order is still 1, 2, 3.

How order works

• Every flex item has a default order value of 0.
• Items are displayed from the smallest order value to the largest.
• If two items have the same order, the one that appears first in the HTML comes first.

So in our example:

• item-2 has order: 1 → appears first
• item-3 has order: 2 → appears second
• item-1 has order: 3 → appears third

Try it yourself: Change the numbers in the order properties. Set all to 0, or make one -1, another 5. Watch how the order changes without touching the HTML.

---

Step 3: Highlight a Featured Item

A very common use of order is to move a “featured” item to the front.

Let’s say you have a list of product cards, and you want to highlight a special one.

HTML

<!-- Example 3: Featured product -->
<div class="products">
  <div class="product">Product A</div>
  <div class="product featured">Featured Product</div>
  <div class="product">Product B</div>
  <div class="product">Product C</div>
</div>

CSS

.products {
  display: flex;           /* Arrange products in a row */
  gap: 10px;
}

.product {
  background: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Move the featured product to the front */
.featured {
  order: -1;               /* Negative order shows before 0 */
  background: #ffe4b5;     /* Light highlight color */
  border-color: #ffa500;   /* Orange border to stand out */
}

Result:

• The “Featured Product” card will appear first in the row.
• Other products (with default order: 0) will follow in their original HTML order.

Using order: -1 is a handy trick to pull one item to the front without changing your HTML structure.

Try it yourself: Add another class like .low-priority { order: 2; } to one of the other products and see how it moves to the end.

---

Step 4: Reordering Items for Mobile vs Desktop

One of the most powerful uses of order is creating different layouts for different screen sizes.

Imagine this layout:

• On desktop: Sidebar on the left, main content on the right.
• On mobile: Main content first (on top), sidebar below it.

We can do this with the same HTML, changing only the CSS.

HTML

<!-- Example 4: Responsive layout with order -->
<div class="page">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
</div>

CSS

.page {
  display: flex;          /* Flex layout */
}

.sidebar {
  background: #e0e0e0;
  padding: 10px;
}

.main {
  background: #d0f0d0;
  padding: 10px;
}

/* Desktop: default layout (sidebar left, main right) */
/* No order needed here; HTML order controls layout */

/* Mobile: stack items and show main content first */
@media (max-width: 600px) {
  .page {
    flex-direction: column; /* Stack items vertically */
  }

  .main {
    order: -1;              /* Move main content to the top */
  }
}

What happens:

• On wide screens (desktop), sidebar is on the left, main on the right (HTML order).
• On small screens (mobile), items stack vertically, and order: -1 moves the main content above the sidebar.

This is a simple example of responsive design using order.

Try it yourself: Resize your browser window. Watch how the order changes when the width goes below 600px.

---

Tips and Good Practices

Here are a few helpful guidelines when using order:

1. Keep it simple

   • Use small, clear order values (like -1, 0, 1, 2) instead of big random numbers.
   • This makes your layout easier to understand later.

2. Remember the default

   • If you don’t set order, the value is 0.
   • Items with the same order follow the HTML order.

3. Be careful with meaning and accessibility

   • Screen readers and keyboard navigation usually follow the HTML order, not the visual order.
   • Don’t use order to completely rearrange content in a way that changes the meaning or flow for users who rely on assistive technologies.

4. Use order for layout, not logic

   • It’s great for adjusting visual layout (like moving a sidebar on mobile).
   • But if something is logically first (like a heading), keep it first in the HTML.

---

Try It Yourself: Mini Practice

Create a simple 4-item layout and practice reordering:

1. Make four boxes: Header, Content, Sidebar, Footer.
2. Use Flexbox to place them in a row.
3. Then use order to:
   • Put Header first
   • Then Content
   • Then Sidebar
   • Footer last
4. Next, add a media query to change the order on small screens.

Play with different order values and see how quickly the layout can change without rewriting your HTML.

---

Quick Recap

You’ve just learned how to:

• Turn a container into a Flexbox layout using display: flex.
• Use the order property to change the visual order of flex items.
• Highlight a special item by giving it a lower order value.
• Create different layouts for mobile and desktop using order and media queries.

Learning layout takes practice, and it’s normal to feel a bit confused at first. Keep experimenting with small examples, tweak the numbers, and observe what happens.

Each time you try something new, you’re building real, practical skills. Keep going—you’re well on your way to mastering CSS layouts!