Switching Order of Columns on Mobile

Site URL: https://www.socialive.us/virtual-events

I have a two column "hopscotch" setup on my page. I'm trying to figure out how to reverse the order of the columns in certain sections on the page so that when the content reflows on mobile, it's text, then image. Currently, the images are stacking on top of each other. 

I've tried the CSS below and have tried located and replacing the correct block-yuis, but I don't see anything happening so I don't know if I'm missing something?

CSS

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

Page: https://www.socialive.us/virtual-events

5 hours ago, HM_SCL said:

Site URL: https://www.socialive.us/virtual-events

I have a two column "hopscotch" setup on my page. I'm trying to figure out how to reverse the order of the columns in certain sections on the page so that when the content reflows on mobile, it's text, then image. Currently, the images are stacking on top of each other. 

I've tried the CSS below and have tried located and replacing the correct block-yuis, but I don't see anything happening so I don't know if I'm missing something?

CSS

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

Page: https://www.socialive.us/virtual-events

try

#ve2-1st-benefit-hopscotch-1 .row:nth-child(2) .span-6:first-child {
      order: 1;
}