COS-General

How can I customize my mobile stacking order?

Last updated: November 15, 2016

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

HubSpot's standard layouts stack modules from left to right on mobile devices. The stack order is depicted below:

User-added image
User-added image

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 outlined below.

Please note: following the steps below requires a good understanding of website design. If you are not comfortable with template building and CSS application, we recommend consulting with a designer.

Method 1: Flex row

  • Navigate to Content > Design Manager.
  • Create or edit an existing template.
  • Group the two columns that you want to stack in a different order.
  • Click Gear icon > Edit CSS on each of the row and column groups and add the following classes to the groups: "stack-row", "main-content", and "sidebar"
  • Your layout should resemble the screenshot below
Layout
  • After you've added the new classes to your columns, add the following code snippet to your 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

  • Go to Content > Design Manager.
  • Create or select the template that you want to edit.
  • Reorder the columns so that the module that you want to stack first is on the right ("sidebar" in this example).
  • Click Gear icon > Edit CSS on each of the columns and add the 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.
Flip layout
  • 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;
    }
}