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.
Design Great Products Faster