swap image and text order for mobile viewing

Site URL: https://www.taylergroup.com/team-copy-for-mobile-test

Hi there, 

Was wondering if anyone can help me rearrange the blocks in the team section of my site so that mobile viewing can look like 

IMAGE 

TEXT

IMAGE

TEXT

Currently it's showing as: 

TEXT

IMAGE

IMAGE

TEXT

TEXT

IMAGE

Thank you so much! 

Add this to your custom CSS:

@media screen and (max-width:640px) {
  div#block-6d69e12e014e3d9add6b+.row, div#block-1220f1cf71ba0a72fc4d+.row {
    display: flex!important;
    flex-direction: column-reverse!important;
  }
}

Credit: I modified code provided by @tuanphan in this forum post.

Hi, for some reason it isn't working 😕

1 hour ago, awk said:

Hi, for some reason it isn't working 😕

Sorry about that, it was working perfectly in Inspector so not sure why; but I updated the code in the previous comment to try a different approach and it should work now — try again!

Thank you so much!!! @dvgdvgdvg it worked perfectly! 

So I'd need to change the code to work with this page then? 

https://www.taylergroup.com/team

3 minutes ago, awk said:

So I'd need to change the code to work with this page then? 

https://www.taylergroup.com/team

Yep – the code works by targeting the row after each spacer block we include the ID for, so you just swap out the bits between each hashtag and plus sign with the IDs for the blocks on this page. So that code would be:

@media screen and (max-width:640px) {
  div#block-yui_3_17_2_1_1612348299837_249909+.row, div#block-yui_3_17_2_1_1611844728135_430177+.row, div#block-yui_3_17_2_1_1611844728135_62014+.row, div#block-yui_3_17_2_1_1611844728135_350620+.row {
    display: flex!important;
    flex-direction: column-reverse!important;
  }
}

You are incredible! Thank you so much for your help!!