[RWD] Foundation 6 -- Reordering Columns on small screen. Help a newbie out?

Hey Y'all

I am in need of some assistance. My sister is looking to update her site from something I made when I was 15(2003, non responsive obviously). It's more or less done, but I'm having an issue with the ordering of divs when it comes to mobile.

This is the stripped down layout

full-screen

mobile

Essentially I want the Main content div to appear first on mobile, and have the two sidebars directly below. Is there a way of doing this in Foundation, or perhaps JS? I found something about the flex grid and 'small-order-1' class but it isn't helping.

If someone could throw me a bone and help me out it would be GREATLY appreciated. It's literally the last thing I have to do on this site. Haven't really touched HTML/CSS for 5-6 years before I started this project, so I'm a bit rusty.