change div order in mobile

Site URL: https://www.jabfurniturerehab.com/

pwd is jules

Hi, I have on my home page, 4 sections. The first three are the same type of blocks except the alternate in column ordering.

So section 1 is like:   imageBlock  |  text

section 2 is like :       text  |  imageBlock

section 3 is like:        imageBlock  |  text

When I view it on mobile, section 2 looks funny with the image block under the text.

Can someone tell me if there is a way to force the image in section2 to be first and then the text? 

This is screenshot of desktop:

and this is screenshot of mobile:




thanks in advance.

51 minutes ago, Jules68 said:

Site URL: https://www.jabfurniturerehab.com/

pwd is jules

Hi, I have on my home page, 4 sections. The first three are the same type of blocks except the alternate in column ordering.

So section 1 is like:   imageBlock  |  text

section 2 is like :       text  |  imageBlock

section 3 is like:        imageBlock  |  text

When I view it on mobile, section 2 looks funny with the image block under the text.

Can someone tell me if there is a way to force the image in section2 to be first and then the text? 

This is screenshot of desktop:

and this is screenshot of mobile:




thanks in advance.

Add this to Design->Custom CSS
 

@media only screen and (max-width: 768px) {
  #page-section-600c23504321966fc68baf1a >  .row {
    flex-wrap: wrap;
    display: flex;
  }
   #page-section-600c23504321966fc68baf1a > .row .sqs-col-6:first-child {
    order: 3;
  }
   #page-section-600c23504321966fc68baf1a > .row .sqs-col-6:last-child {
      order: 1;
     width: 100% !important;
  }
}

thanks, that resolved my issue.