Landing page stacking order on mobile view

Highlighted
New Contributor

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

 

Screen Shot 2020-06-09 at 22.30.22.pngAny help anyone can provide would be greatly appreciated! 

 

Thanks in advance! 

Reply
0 Upvotes
3 Replies 3
Highlighted
Esteemed Contributor

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:

Daniel Bleichman
Marketing | AudioCodes

Daniel.bleichman@audiocodes.com
Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
New Contributor

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

Reply
0 Upvotes
Esteemed Contributor

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

Daniel Bleichman
Marketing | AudioCodes

Daniel.bleichman@audiocodes.com
Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes