Reverse order of elements with CSS

by Michael Scharnagl

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.