HOWTO: Reorder nav items using flexbox

I needed to do this today because the plugin-outlet was not where I needed it to be.

Turns out it was relatively easy to do, using flexbox. Example below is for the user-main-nav in the profile, but similar would work for any nav I think.

ul.main-nav.user-nav {
  display: flex;

  li.<MY-CLASS> {
    order: -1;
  }
}