Rearranging elements

I'm wondering what's the best way to go about rearranging the elements, swapping them, etc on the profile. Order: works but as far as I'm aware you can't use it to move one thing from col.w-40.left to col.right as it's 2 separate flex containers

One of the things I wanted to do was to swap around .blog-preview and .profile .contact so that the add to friends box is directly across from .general-about

I can do that in a very janky way by doing position:relative and then using top, bottom, left or right to move them to the other side and into the right place, which looks incredibly broken on phone and it's just quite finnicky and hard to get it in the right place. Is there an easier way to go about it?