CSS Quickie: Order!

In truth, most of the work we do in CSS is about positioning and placement. It’s such a critical aspect of the language that every few years a new and improved method for doing it comes out. Tables, floating, flexbox, and CSS grid to name a few throughout the years. Today, we’re going to dive into this by looking at the order property.

This property is interesting because it allows to position elements within the same container relative to each order. To better illustrate, imagine you had 5 <Div /> elements: 1,2,3,4,5. For whatever reason in your application, you need the ability to put <Div /> 3 in front and <Div /> 5 in the middle. The order property allows for that!

Let’s look at the code.

/*
  <div id="ele1" />
  <div id="ele2" />
  <div id="ele3" />
  <div id="ele4" />
  <div id="ele5" />
*/

#ele1 {
  order: 2;
}

#ele2 {
  order: 4;
}

#ele3 {
  order: 1;
}

#ele4 {
  order: 5;
}

#ele5 {
  order: 3;
}

Note: You’ll need to place an order value on all elements, or the order will only affect the one’s you do.