How do columns stack one below the other on mobile

In HubSpot, the columns on the left side in a row are always above those on the right on mobile. For example, these groups and modules:

column-stack-in-hubspot-1

will stack this way on mobile:

column-stack-in-hubspot-2

How to swap two columns

In Act Theme however, you can swap two columns, so they can stack in your desired order on mobile. Please note this doesn't work with three or more columns, but only two:

1 You just need to group your two columns:

act-theme-two-column-invert-float-group-modules

2 Then, add this class to the new group:

two-column-invert-float

act-theme-two-column-invert-float-group-edit-css

act-theme-two-column-invert-float-group-class

3 Click Done and Publish your changes.

This way, your left column (as seen in Design Manager) will actually float to the right, and the right column will float to the left:

act-theme-two-column-invert-float-columns

But, they will keep the natural flow on mobile:

column-stack-in-hubspot-2

Note: If your columns have some left/right padding, you can use helper classes to adjust or remove that.

HubSpot User Guides

You can explore and learn more about the HubSpot tools and features in the official HubSpot Academy.

HubSpot Academy | User Guides