Tutorials

Table of contents
Close

How to customize your mobile stacking order

ModulesStackingOrderMobile

HubSpot's standard layouts stack modules from left to right on mobile devices, like the example above. In order to stack from right to left, you will need to customize your template and add CSS to adjust the stacking order. There are two methods to achieve this.

Method 1: Flex row

  • Navigate to Content > Design Manager.
  • Create a new template or select an existing template from the finder.
  • Group the two columns that you want to stack in a different order.
  • Click directly on the groups to select them in the inspector, then add the following CSS Classes to the groups: "stack-row", "main-content", and "sidebar".
  • Your group should look like the example below.
flex row mobile stacking order
  • After you've added the new classes to your columns, add the following code snippet to your attached CSS stylesheet:


@media screen and (max-width:768px) {

.stack-row > .row-fluid-wrapper > .row-fluid{
  display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
    .main-content{
        order: 2;
-webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    
        width: 100%;
    }
    .sidebar {
        order: 1;
-webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
        width: 100%;
    }
}
    

Method 2: Flipping module float

  • Navigate to Content > Design Manager.
  • Create a new template or select an existing template in the finder.
  • Reorder the columns so that the module that you want to stack first is on the right.
  • Click directly on each of the columns to select them in the inspector, then add the Custom Class "sidebar" and "main-content" to the two columns.
  • The template should resemble the layout below. The order of the columns should be the opposite of what you want to show on desktop.
footer-js.gif
  • After you've added the new classes to your columns, add the following code snippet to your CSS stylesheet:


.sidebar {
    margin-right: 0 !important;
    float: right !important;
}
.main-content {
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    .main-content {
    margin-left: 0 !important;
    }

    .main-content,
    .sidebar {
    width: 100% !important;
    float: none !important;
    }
}