I think a PHP solution for this would be the best way to do it since it happens before the user receives the site. Don't love the js solution since it would have to run in the browser as soon as the user receives the site, but it is still good since you are actually modifying the DOM to the correct order.

Since I can't think of a PHP way of doing it, and somebody already gave you a js solution, here are two CSS solutions:

Flexbox:

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

CSS Grid:

#generalinfo{
  display: grid;
}

.cat{
  grid-row: 2;
}

Either should do the trick. Although you might have to play around with it a little more if you plan to allow the user to add more sections to the menu that must work the same way.

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;
}