--- title: Nesting columns subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: nesting breadcrumb: - home - documentation - columns - columns-nesting ---

You can nest columns to have more flexibility in your design. You only need to follow this structure:

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

Multiline columns will also have a gap between each line.