Landing page stacking order on mobile view

[ImanMaalouf]

Hello all! 

I am looking to change the stacking order of some elements on this page: (http://www.tminc.com/voice-and-broadband-reporting-service) so that the first form on this page would display underneath the header in a mobile view.

I've used the first method of this article: https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-customize-my-mobile-stackin...but for some reason the order is still the same. Below is the styling I'm applying & attached a screenshot of the page template design.

@mediascreen 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%;
}

Any help anyone can provide would be greatly appreciated! 

Thanks in advance! 

[Daniel_Bleich]

Hi,

What I usually do to change order of elements is to make the elements "smart" on the landing page.

And then I can have modules that only appear on mobile and some that only appear on desktop. You can create all the modules twice and then play around with the order however you like, for example see this landing page which has different layout for mobile and desktop using smart modules:

[ImanMaalouf]

Hello. Thanks for your advice. I will convert them into smart modules and see how it goes.

[Daniel_Bleich]

Great, would love to hear if it worked for you!