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 specify direction: 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.

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.

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.

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 the order property to determine in which order the buttons should appear.

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:

“Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.”

“As with reordering flex items, the order property must only be used when the visual order needs to be out-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.