Staggered layout column reverse for mobile

Site URL: http://vividbooths.co.uk

I have a staggered layout (works well on desktop), but 2 pages on my site need the second row column order reversed for mobile view.   

http://www.vividbooths.co.uk

First is in my home(index). Page title is 'cascadinginfo' and the second row displays 'weddings' section using a card block on the right column, with a separate associated image displayed on the left column.

Mobile view results in the 'weddings' associated image preceding the card block 'weddings' ,  but for continuity, I need the column reversed for mobile view.

I've searched this site extensively. Lots of users have similar problems, and remedial code that should work for me looks like this;

@media screen and (max-width:640px) {
div#yui_3_17_2_1_1589993939235_232+.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
  } 
div#yui_3_17_2_1_1589993939235_306+.row {
    display: flex;
    flex-direction: column-reverse;
} 
  }

Or this;

@media screen and (max-width:640px) {
/* cascadinginfo-columnreverse */
div#block-yui_3_17_2_1_1593356729679_4534+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Neither is working for me, and I am concerned that I am not sourcing the correct id's from the inspect element on my site because it's not clear to me which one to use. The row id that specifically targets this 'weddings' section is dynamic and can't be used. 

My second page is the bookings page

https://www.vividbooths.co.uk/booking-page

The text is hidden unless viewed on a mobile (because I am using accordion text for desktop), but the same issue on the second row. The 'Choose Your Package' card block appears after the associated text.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5ef7ceebf6302b5d71d293d8 .span-12>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-5efdbd87229fe539a8cb8e74 .span-12>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
}

Ha, thanks man. Perfect!

Hey Squarespace.

I could use some help with the same issue. 
https://techster.se/cyber-security

In the row that mentions - (Service 2). Need to be reversed on mobile.

The CSS I'm putting in is the following: 
@media only screen and (max-width: 767px){

 div#yui_3_17_2_1_1637861778225_138.row.sqs-row {
    display: flex!important;
    flex-direction: column-reverse!important;
}

}

It works when I do it inspector, but it seems like it won't go through when I put it in the custom CSS field.

On 11/26/2021 at 12:59 AM, Techster said:

Hey Squarespace.

I could use some help with the same issue. 
https://techster.se/cyber-security

In the row that mentions - (Service 2). Need to be reversed on mobile.

The CSS I'm putting in is the following: 
@media only screen and (max-width: 767px){

 div#yui_3_17_2_1_1637861778225_138.row.sqs-row {
    display: flex!important;
    flex-direction: column-reverse!important;
}

}

 

It works when I do it inspector, but it seems like it won't go through when I put it in the custom CSS field.

Use this CSS

/* mobile service 2 */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1637759536500_83477+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Hi I'm having the same issue,

I want to switch the text and image so that the image shows up first in mobile. I need help on 2 pages - the homepage and the service page. 

This is the code I used in the homepage which works fine but then it reverts the change once you refresh the page. 

@media screen and (max-width: 750px){
  #yui_3_17_2_1_1648481696735_335{
    display: flex !important;
   flex-direction: column-reverse !important;
  }
  }

This is the code for the service page

@media screen and (max-width: 750px){
  #yui_3_17_2_1_1648255616881_358{
    display: flex !important;
   flex-direction: column-reverse !important;
  }
  }

This is the link to the backend of the website:

https://hen-sparrow-ydsa.squarespace.com/config/design password: Luna286

Any help is welcomed!