How to center content in a container on mobile

Hi,

At the bottom of my site I have a container that holds my Recent Posts as well as a Sidebar (labeled Favorites). On a desktop I’d like the Recent Posts to remain on the left and the Favorites Sidebar on the right, so they’re side-by-side. However, on mobile I’d like the Recent Posts to be centered and shown above the Favorites Sidebar to be shown below and also centered.

I’ve played around a bit with position, floating and centering the elements, but haven’t come up with the right combination. I’ve tried many options from the forum too and am now just completely confused. I’d appreciate any help!

Thanks,

Aimee