Mentor Theme Stagger Layout Stacking

Hi guys!

I'm currently putting together a website for a client and am hitting a bit of a hiccup when laying out their team page. I want to stagger the content as follows:

Image | Text
Text | Image
Image | Text
etc

The layout is working exactly as desired on Desktop, but as most of you can imagine, it becomes problematic on mobile devices.

Is there a way, using the mentor theme, that I can inject some css code to reverse the stacking of each 2nd row, without throwing the rest of the website into disarray?

Really appreciate any assistance!

NB. The url for the page in question is www.jamesandbrothers.com.au/who-we-are

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* nathan */
div#block-yui_3_17_2_1_1575956026425_28740+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* luke */
div#block-yui_3_17_2_1_1575956026425_30707+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* naori */
div#block-yui_3_17_2_1_1575956026425_32685+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

36 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* nathan */
div#block-yui_3_17_2_1_1575956026425_28740+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* luke */
div#block-yui_3_17_2_1_1575956026425_30707+.row {
    display: flex;
    flex-direction: column-reverse;
}
/* naori */
div#block-yui_3_17_2_1_1575956026425_32685+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Worked perfectly, thanks so much! Saved me a TON of time!!

Hey there, I just stumbled across this brilliant post/question.

Firstly - thank you @tuanphan - you don't know how many times you saved me with your brilliant css help!!

I am facing the same problem as Luke, and am wondering how I can generate this: div#block-yui_3_17_2_1_1575956026425_28740+.row ; to be able to apply the css to my page. 

Can't wait to here from anyone that can assist me in this matter and THANK YOU so much in advance!!

15 minutes ago, pebbles said:

Hey there, I just stumbled across this brilliant post/question.

Firstly - thank you @tuanphan - you don't know how many times you saved me with your brilliant css help!!

 

I am facing the same problem as Luke, and am wondering how I can generate this: div#block-yui_3_17_2_1_1575956026425_28740+.row ; to be able to apply the css to my page. 

Can't wait to here from anyone that can assist me in this matter and THANK YOU so much in advance!!

Can you share link to page in your quesstion?

Hi @tuanphan thank you for the quick follow-up; please find the link here: https://yellow-chameleon-n8e9.squarespace.com/

7 minutes ago, pebbles said:

Hi @tuanphan thank you for the quick follow-up; please find the link here: https://yellow-chameleon-n8e9.squarespace.com/

Which section? Which order on mobile?

There a few section I would need to adjust, but here as an example: on page Renovation https://yellow-chameleon-n8e9.squarespace.com/rnovation

I would like to have the small icons appearing on the mobile version as on desktop, so besides the text not under and zoomed in, as illustrated below:

Desktop:

Mobile:

26 minutes ago, pebbles said:

There a few section I would need to adjust, but here as an example: on page Renovation https://yellow-chameleon-n8e9.squarespace.com/rnovation

I would like to have the small icons appearing on the mobile version as on desktop, so besides the text not under and zoomed in, as illustrated below:

 

 

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1590159851769_50076+.row .span-7 {
    width: 70% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1590159851769_50076+.row .span-3 {
    width: 30% !important;
    float: left !important;
}

THIS IS MAGIC! Thank you so much @tuanphan! What a support; thank you!!

As I have some more cases as such, may I ask you how you came to the div# code?

As you may have seen I have many such "design elements" of big lettering as an image that I would need to adjust as well....would be great if you could please let me into your secret! ☺️

Example of these design elements, disrupting the experience on mobile 😞

10000 roses to you, thank you!

each case needs different code.

however you can find ID with this tool https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Oh, would have been too perfect 😕

Thank you for the plug-in! Do you happen to help me a bit further with the most essential adaptations for mobile? Would be 3 pictures...
(I feel weird asking, as I would understand if you see this going beyond a quick help via a forum)

I allow myself  to attach the 4 most essential I would also need to adapt for mobile. If you feel it exceeds the scope, don't worry — In any case, THANK YOU SO MUCH for having been such a great help already!! Really!

- The 'a' at https://yellow-chameleon-n8e9.squarespace.com/rnovation

- The 'Q' at https://yellow-chameleon-n8e9.squarespace.com/qui-sommesnous-

The 'L' at https://yellow-chameleon-n8e9.squarespace.com/privatisation and the picture that is below the text; with Picture aligned left and text right

/* rnovation */
div#page-5e9d6b56554bbb3b8e32d545 .span-10 .row .span-4 {
    width: 40% !important;
    float: left !important;
}
div#page-5e9d6b56554bbb3b8e32d545 .span-10 .row .span-6 {
    width: 60% !important;
    float: left !important;
}
/* Qui */
div#page-5e9d7bc5aae6d36c0e3721f7>.row:nth-child(2) .span-10 .span-3 {
    width: 30% !important;
    float: left !important;
}
div#page-5e9d7bc5aae6d36c0e3721f7>.row:nth-child(2) .span-10 .span-7 {
    width: 70% !important;
    float: left !important;
}
/* Priva */
div#page-5e5658bd463d2210093568a2 .span-10>.row:nth-child(6) .span-3 {
    width: 30% !important;
    float: left !important;
}
div#page-5e5658bd463d2210093568a2 .span-10>.row:nth-child(6) .span-7 {
    width: 70% !important;
    float: left !important;
}

INCREDIBLE! THANK YOU! Amazing!!

100 thumbs up to for your kindness!!