I've been designing my new SXA site on my desktop computer. On a whim I decided to see what my new site design would look like on a mobile device, and I was very disappointed. The site simply shrunk down instead of rearranging itself as I had expected. Here's what my site looks like on the desktop:
Here's what the site looks like on an iPhone 5:
I was expecting the site to break at certain points and rearrange automatically in the same way that Bootstrap does. I am using the basic theme. I thought that SXA automatically made my site responsive.
What am I missing to make my site mobile responsive?
Edit
Here's the wireframe of the same page:
Here's what the mobile wireframes look like. I put some big arrows showing where I expected the columns to wrap, but they didn't.
Here's what it looks like on an actual mobile device: