Foundation

Mobile Grids

Mobile Grids

← Back to Grid

On phones, columns become stacked.

That means this twelve column section will be the full width, and so will the three sections you see below.

Section 1

This is a four column section (so three of them across add up to twelve). As noted above on mobile, these columns will be stacked on top of each other.

Section 2

This is another four column section which will be stacked on top of the others. The next section though…

Section 3

Here we've used a block grid (.block-grid.three-up). These are perfect for similarly sized elements that you want to present in a grid even on mobile devices. If you view this on a phone (or small browser window) you can see what we mean.

Stay on top of what's happening in responsive design with Responsive from ZURB.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »