The column content types such as "Two-column Body Content" and "Three-column Body Content" are responsive columns — that is, columns that arrange themselves according to the available screen real estate.

Much like using a table to separate your page content into a number of columns, the column content types allow you to divide a horizontal area of your page into a number of boxes, each of which may be filled in using the same fields normally associated with body content types. The advantage of using a column content type over a table is this type's ability to automatically rearrange its content based on available screen area.

When viewed on a widescreen or standard ratio computer monitor, the columns will display side-by-side; however, if viewed on a small tablet or smartphone, the columns may stack one on top of the other depending upon the size of the screen.

This stacking behavior ensures that your content isn't crushed into a narrow portion of the page and keeps mobile browsers from being forced to zoom out to fit all of your content on the screen (and, as a result, making all of your text unreadably small).

Tips & Tricks

• Keeping larger images sized correctly in column content types can sometimes be tricky. To expand your image to take the full width of the column, double-click the image in your editor, then type "fit" into the "class" field and press "Update." This will give control of image sizing to the column content type.
• Tables can often still be appropriate to use on a webpage, for example when you need to display tabular data.