Reverse <ul> ordering using CSS 2.1

Question

I’m attempting to reverse the order of an unordered list using only CSS 2.1

The desired ordering is: Introduction – History – National Flags – Maritime signal flags

I have previously solved this using CSS rotations however this will not longer be CSS 2.1 compatible.

Thanks, Frank

Answer 1

A neat trick is to set the parent ul to a flex box and then use the property flex-direction: column-reverse;

ul{
  display:flex;
  flex-direction: column-reverse;
}