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.