How to switch mobile block order on blog posts

Site URL: https://helloluci.com/helloluciblog/self-care-during-quarantine

Hi All!

I'm working on some blog post that interview people, and I current have the desktop view set up as 'image right, text left' then 'text right, image left' on the next line, and so on. In mobile view, I'd like for the images to stack on top of the quotes. I have tried the following CSS which was given to me by a more advanced user, but it didn't work. I'm not really sure where to go from there.

I've linked the blog post for reference!

@media screen and (max-width: 640px) {
.Main-content .code-block + .sqs-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  }
}

Thank you!

I don't think you can do it with just CSS, will need to use both CSS and jQuery because the column divs have no class or fixed ID's. What you did above would flip all of them (even the ones that were originally oriented correctly).

@media screen and (max-width: 640px) {
  .Main-content .row.sqs-row {
      display: flex;
      flex-direction: column;
  }
}

$('div.image-block').parent().attr('style','order:-1');