How To Create A Change Order

Read Time: 7 mins Languages:

In this tutorial we'll cover a few different CSS methods for reordering HTML elements.

The Goal

The layout we want to build is very simple. Specifically, on small screens (i.e. <600px), it should look like this:

On medium screens and above (i.e. greater than, or equal to 600px), we want it to appear as follows:

Our biggest challenge is to find a way to reverse the buttons' order.

The Markup

The markup we'll be using is straightforward; just a div element containing four buttons:

<div class="boxes">   <button>Button 1</button>   <button>Button 2</button>   <button>Button 3</button>   <button>Button 4</button> </div>

Basic Styles

On small screens, all buttons share the same styles:

.boxes button {   display: block;   width: 100%;   padding: 15px;   border: none;   margin-bottom: 5px;   box-sizing: border-box;   font-size: 1rem;   text-align: center;   text-decoration: none;   background: gold;   color: #000; }  .boxes button:nth-of-type(even) {   background: #e6c200; }

On larger screens, we only assignwidth: 25% to the buttons. The remaining styles will be determined by whichever CSS method we use to reverse the buttons' order.

@media screen and (min-width: 600px) {   /* we skip this property in flexbox and grid methods */   width: 25%;     /* more stuff here */ }

Lastly, we'll add a few styles for the focus state of our buttons:

.boxes button:focus {   outline: none;   color: #fff;   background: firebrick; }

So, if we use the keyboard ("Tab" key) to navigate through the buttons, each of the focused buttons will get a dark red as background color.

Column Ordering Methods

At this point we're ready to examine different CSS approaches for reversing the buttons' order when the viewport exceeds 599px.

Method #1: Floats

One quick solution is to float the buttons to the right. Here's the extra CSS:

@media screen and (min-width: 600px) {   .boxes button {     float: right;     width: 25%;   } }

Here's the embedded Codepen demo:

Method #2: Positioning

An alternative solution is to position the elements, either relatively or absolutely.

Following the first option, we float the buttons to the left, give them position: relative, and then use the left property to set their position.

The required CSS looks as follows:

@media screen and (min-width: 600px) {   .boxes button {     position: relative;     float: left;     width: 25%;    }     .boxes button:nth-of-type(1) {     left: 75%;   }    .boxes button:nth-of-type(2) {     left: 25%;   }    .boxes button:nth-of-type(3) {     left: -25%;   }    .boxes button:nth-of-type(4) {     left: -75%;   } }

The embedded Codepen demo:

Following the second option, we could also give our buttons position: absolute and then use theleft property to set their position more precisely.

The corresponding CSS rules:

@media screen and (min-width: 600px) {   .boxes {     position: relative;   }      .boxes button {     position: absolute;     width: 25%;   }      .boxes button:nth-of-type(1) {     left: 75%;   }      .boxes button:nth-of-type(2) {     left: 50%;   }      .boxes button:nth-of-type(3) {     left: 25%;   }      .boxes button:nth-of-type(4) {     left: 0;   } }

The Codepen demo:

Method #3: `direction` Property

A less obvious approach is to use the direction property; something usually reserved for altering the reading direction of text. In our case, we specifydirection: rtl (right to left) to the wrapper element, instantly reversing the layout.

Note: for this example we make our elements behave like table-elements in order to achieve the horizontal layout.

You can see the necessary CSS styles below:

@media screen and (min-width: 600px) {   .boxes {     display: table;     width: 100%;     direction: rtl;   }    .boxes button {     display: table-cell;     width: 25%;   } }

It's worth mentioning that if (for some reason) we want to change the textual direction of the buttons, we can include the following "bi-directional override" rule in our stylesheet:

.boxes button {   unicode-bidi: bidi-override; }

The Codepen demo:

Method #4: Transforms

A neat solution is to float the buttons to the left and then apply transform: scaleX(-1) to them and their parent. By setting negative values, the transformed elements aren't scaled. In actual fact, they're flipped along the horizontal axis.

Below is the required CSS:

@media screen and (min-width: 600px) {   .boxes {     transform: scaleX(-1);   }    .boxes button {     float: left;     transform: scaleX(-1);     width: 25%;   } }

The embedded Codepen demo:

We can even use transform'srotate function to achieve the desired order. All we have to do is to add transform: rotateY(180deg) to the buttons and their parent.

Here's the required CSS for this solution:

@media screen and (min-width: 600px) {   .boxes {     transform: rotateY(180deg);   }      .boxes button {     float: left;     transform: rotateY(180deg);     width: 25%;   } }

And the Codepen demo:

Method #5: Flexbox

Flexbox is another way for changing the column ordering. In our example we can take advantage of two different flexbox properties to create the desired layout.

The first approach is to set the parent of the buttons as a flex container and then add the flex-direction: row-reverse property value to it.

Here are the corresponding styles:

@media screen and (min-width: 600px) {   .boxes {     display: flex;     flex-direction: row-reverse;   } }

The embedded Codepen demo is shown below:

The second flexbox option is to set the parent of the buttons as a flex container and then use the order property to determine in which order the buttons should appear.

The corresponding CSS:

@media screen and (min-width: 600px) {   .boxes {     display: flex;   }      .boxes button:nth-of-type(1) {     order: 4;   }    .boxes button:nth-of-type(2) {     order: 3;   }    .boxes button:nth-of-type(3) {     order: 2;   }    .boxes button:nth-of-type(4) {     order: 1;   } }

The Codepen demo:

Method #6: CSS Grid Layout

A promising solution for rearranging elements is the CSS Grid Layout. Even if it has very limited browser support at the time of this writing, let's try it out. Keep in mind that our example will work only in Chrome, which by default doesn't support this CSS feature, but we can follow a few simple steps to enable it.

Without going into too much detail, let's describe two ways for achieving the desired order.

The first option is to set the parent of the buttons as a grid container and then use the grid-column property to determine in which order the buttons should appear. In addition, we ensure that all buttons belong to the same (first) row by adding grid-row: 1 to them.

See the associated styles below:

@media screen and (min-width: 600px) {   .boxes {     display: grid;     grid-template-columns: repeat(4, 1fr);    }      .boxes button {     grid-row: 1;   }      .boxes button:nth-of-type(1) {     grid-column: 4;   }    .boxes button:nth-of-type(2) {     grid-column: 3;   }    .boxes button:nth-of-type(3) {     grid-column: 2;   }    .boxes button:nth-of-type(4) {     grid-column: 1;   } }

The embedded Codepen demo:

The second grid option is similar to flexbox's second solution. We set the parent of the buttons as a grid container and then use theorder property to determine in which order the buttons should appear.

The required CSS:

@media screen and (min-width: 600px) {   .boxes {     display: grid;     grid-template-columns: repeat(4, 1fr);   }      .boxes button:nth-of-type(1) {     order: 4;   }    .boxes button:nth-of-type(2) {     order: 3;   }    .boxes button:nth-of-type(3) {     order: 2;   }    .boxes button:nth-of-type(4) {     order: 1;   } }

The Codepen demo:

Again, you'll need to enable "Experimental Web Platform features" in Chrome to see the result.

Source Order vs. Visual Order

As we've demonstrated, we can follow different CSS approaches to change the order of our buttons. So, at this point let's revisit each of the demos and use the keyboard (click the pen and hit the "Tab" key) to navigate through the buttons. What you'll notice is that even if "Button 4" visually appears first, the first button that gets focused is "Button 1" because that's the one which appears first in the DOM. The same will happen if we test the demos with a screen reader (I did my tests in NVDA).

Given this disconnection between the DOM order and the CSS order, we should be very careful with the parts of our pages that we rearrange with CSS. For example, while flexbox's order property is one of the most flexible ways for reordering elements, the spec says:

"Authorsmust use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming."

In the same way, here's what the spec says for grid's order property:

"As with reordering flex items, the order property must only be used when the visual order needs to beout-of-sync with the speech and navigation order; otherwise the underlying document source should be reordered instead."

Note: If you test flexbox's second solution (with the order property) in Firefox, you'll notice that the keyboard navigation works fine and the first button that gets focused on medium screens and above is "Button 4". This behavior has been reported as a bug.

Conclusion

In this tutorial, we examined different CSS methods for reordering HTML elements. Of course, not all of these methods are appropriate in all cases. Before deciding which method to use, you should take into account a few things:

The browsers you want to support. For instance, some of the aforementioned approaches don't work in earlier versions of Internet Explorer (e.g. < 10).
The complexity of your rearrangement. Is it something simple like the one we saw in our example or something more complicated?

If you can think of any other methods for reversing the buttons' order, be sure to share them with us in the comments below.