#css Notes

Tip for sorting lists using CSS!

If your list is initially sorted, you can reverse it by using display: flex and setting the flex-direction attribute to column or column-reverse.

For example:

ol {
    display: flex;

    /* flips the order */
    flex-direction: column-reverse;
}

Then you write a little bit of Javascript to change the flex-direction when the user selects a dropdown option and voilà, sorting!

Now my /notes page can be viewed with the oldest notes at the top 🤗.