Responsive columns

Columns in layouts can become quite complex, with multiple layers of columns in rows and nested columns. For an overview of columns with many visual examples, see the the column layouts overview.

Here's a complex example of column stacking. This example shows a single row with two column layers. The first column layer has two columns with two layers each. The second column layer has two module layers and a child column layer. The main columns have a light gray background. The child columns have a dark gray background.

As screen size decreases, column and module stacking occurs left to right, top to bottom, first within each column, then across columns in the same layer, then across column layers:

This stacking behavior applies to both standard content area layouts and to Beaver Themer layouts, such as in a Header layout.

You can reverse the column stacking order for any column layer in your layout by following these instructions.

You can also prevent columns from stacking by setting custom responsive widths.

Tip

Knowing how columns will stack is an important factor in how you construct your page. It's important to test your layouts at various device sizes as you develop the page to make sure the information flow across your columns is preserved. See the article on Responsive Editing Mode with an example that shows how responsive preview in Beaver Builder works.

Last updated on