Flex not stacking properly on Safari

[tommitchell]

Hi there

On this page https://info.goodlord.co/contract-generation (password pickles123) I'm attempting to ensure the circular images and corresponding text alternate in order on desktop but remain in the same order when stacked on mobile. In order to achieve this I have created a class '.benefitgroup' 

.benefitgroup > .row-fluid-wrapper > .row-fluid {
  
    display: -webkit-box !important;   
    display: -moz-box !important;      
    display: -ms-flexbox !important;   
    display: -webkit-flex !important;  
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    -moz-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;


}

and I'm using .main-content and .sidebar on each element to order them consistently on mobile

  @media screen and (max-width:767px) {
.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%; 
    }

It's displaying fine on desktop on Chrome but Safari desktop won't align horizontally unless .benefitgroup is removed - which then prevents the mobile stacking from working in the correct order. I'd be really grateful if anyone can spot a reason why this might be happening, or if I'm doing something totally stupid!

Thanks very much

[tommitchell · Accepted solution]

I've now sorted this - please ignore!!

[jennysowyrda]

Thanks for sharing @tommitchell!

Do you mind sharing what your solution was?