Common Sidebar Mistake

Standard Column

This is a standard 9-width column that you'd see on a lot of standard content pages.

Standard Sidebar

A common 3-width column used for sidebar content.

The layout problem

A page set up with a two- or three-column layout for your content can work nicely. But if you want to add another content section farther down, as you see here, consider how the content will be laid out on mobile.

This content section has been placed within an entirely new row from the content above. Because columns are contained inside of rows, on mobile the second column above will slip below the first column and above this row.

Depending on the content you are including in the second column, you may want it to break to the bottom of the page on mobile. For instance, content like a Twitter feed or contact information will likely make more sense at the bottom rather than in the middle of the content on your page. An important call to action, on the other hand, might work best closer to the top of the page.

If you want a similar layout to this one with the second column slipping underneath this section of content in mobile, you can add this content to a new component in the first column above rather than as a new row.

When building out your page layout, always keep in mind how it looks on mobile.