Trouble changing the stacking order in mobile view.

[jzimmermann]

Hello all! 

So I'm 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 and have the rest of the elements stack file in underneath that. 

I've used this article (https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-customize-my-mobile-stackin...) which seems like it has what I need, to edit the stylesheet and apply what I think shouldbe the correct styles to make this work. Below is the styling I'm applying...

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

.stack-group > .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;
}
.tmi-offer{
order: 5;
-webkit-order: 5;
-moz-order: 5;
-ms-order: 5;

width: 100%;
}
.top-banner {
order: 4;
-webkit-order: 4;
-moz-order: 4;
-ms-order: 4;

width: 100%;
}
}
.content-one{
order: 3;
-webkit-order: 3;
-moz-order: 3;
-ms-order: 3;

width: 100%;
}
.content-two {
order: 2;
-webkit-order: 2;
-moz-order: 2;
-ms-order: 2;

width: 100%;
}
}
.tmi-contact-form{
order: 1;
-webkit-order: 1;
-moz-order: 1;
-ms-order: 1;

width: 100%;
}

I feel like I'm pretty close but I'm unsure where I'm going wrong here. Any help anyone can provide would be greatly appreciated! 

Thanks in advance! 

[Anonymous · Accepted solution]

Hi @jzimmermann,

I was able to make this happen with the following code,

@media (max-width:767px){

#stack-group{
display:flex;
flex-direction:column;
}

#stack-group .row-fluid-wrapper:nth-child(3) {
    order: 1;
}

#stack-group .row-fluid-wrapper {
    order: 2;
}

}

Your display:flex has effect on immediate child elements i.e, .row-fluid-wrapper and not your inside classes.

[jzimmermann]

@Anonymous thanks! This did the trick! 

[DaniellePeters]

You have soem extra closing curly brackets in there which is probably causing the problem. Try this:

@media screen and (max-width:768px) {
    .stack-group > .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;
    }
    .tmi-offer{
         order: 5;
         -webkit-order: 5;
         -moz-order: 5;
         -ms-order: 5;
         width: 100%;
    }
    .top-banner {
         order: 4;
         -webkit-order: 4;
         -moz-order: 4;
         -ms-order: 4;
         width: 100%;
     }
    .content-one{
         order: 3;
         -webkit-order: 3;
         -moz-order: 3;
         -ms-order: 3;
         width: 100%;
    }
    .content-two {
         order: 2;
         -webkit-order: 2;
         -moz-order: 2;
         -ms-order: 2;
         width: 100%;
    }
    .tmi-contact-form{
         order: 1;
         -webkit-order: 1;
         -moz-order: 1;
         -ms-order: 1;
         width: 100%;
    }
}

[jzimmermann]

Thanks for looking into this Danielle! Unfortunately it doesn't seem like this made any impact on the stacking order of the elements in the mobile view.