How to reorder text layout in mainpage


I have been looking extensively before asking, but I found no guidance in meta on how to do the following:

This is the standard layout for the “only categories” option:

And I want to reorder it like this (this is a quick collage, of course margins should be improved, but I think this concept will allow for a more compact and easy to read layout -I’m planning to add much more categories in the future-):

I did found the following example code in w3schools, which seems to be all I need:

But since I found nothing here in meta (and I’m sure that layout re-ordering is a pretty common thing), I just wanted to make sure I was not overlooking/about-to-break anything.

Thank you very much in advance for any guidance you might be able to provide!!