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.