How to move parent li to end of child ul

Since this is a stylistic change, and not looking to reorder the DOM for semantic reasons, I think the js solution wouldn’t be the best approach. Better to keep it in CSS, keeping the markup intact.

Two ways to do it:

Flexbox:

#generalinfo{
  display: flex;
  flex-direction: column-reverse;
}

CSS Grid:

#generalinfo{
  display: grid;
}

.cat{
  grid-row: 2;
}