Reverse order of elements with CSS

by Michael Scharnagl

This article has been updated the last time on January 9, 2015 and the given information may be not accurate anymore. Feel free to contact me on twitter to get more details.

Reverse with transform

This is done by setting transform: rotate(180deg); for the ol, and transform: rotate(-180deg); for every li element.

Transform was certainly not build for this task, but it is animatable and browser support is very good.

Specification: W3C Working Draft

Browsersupport: Can I use

Animatable: yes

Example (hover over list to reverse order): http://jsbin.com/diqata/1

Reverse with flex-direction

After posting my example with transform on twitter, Sven Wolfermann suggested using flexbox, more specific flex-direction: column-reverse; for this task.

I haven’t used flexbox very often and obviously not thought about it. If you look it up on MDN it says » Behaves the same as row but the main-start and main-end points are permuted. « . Exactly what we want, no hack involved and thus perfect for our use case.

But it also has some disadvantages: It isn’t animatable and browser support is currently not as good (IE10+) as for transforms.

Specification: W3C Working Draft

Browsersupport: Can I use

Animatable: no

Example (hover over list to reverse order): http://jsbin.com/diqata/1

Conclusion

If you are already using flexbox, flex-direction is probably the right choice. Though, if you want transitions or broader browser support the transform trick is a good alternative.

Know any other ways to reverse order with CSS, please let me know.


Michael Scharnagl

Portrait Michael Scharnagl

Follow me: @justmarkup

Subscribe to RSS: /feed

A freelance front-end developer focusing on HTML5, CSS, progressive enhancement and web performance.