Need help with div stacking order

Hi everyone,

I am trying to chage the stacking order for some div's with text and images on mobile. They are side by side in rows of two. I uploaded screen shots of desktop and mobile of what I have currently. When stacking on mobile they stack with text-text-image-image and so on. I would like them to be text-image-text-image, etc. 

This is the link to my site I coded it and am hosting it in Marketo as a landign page:
https://offers.premierinc.com/Transforming-Healthcare

BTW-I removed what I tried in order not to confuse so basically I'm starting over with this post. 

I found this on stackeoverflow but can't get it to work with my code. 

.col {
  display: flex;
  flex-wrap: wrap;
}

.col div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 200px;
  border: 2px solid green;
  font-size: 18px;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .col div:nth-child(1) {
    order: 1;
  }
  .col div:nth-child(2) {
    order: 2;
  }
  .col div:nth-child(3) {
    order: 4;
  }
  .col div:nth-child(4) {
    order: 3;
  }
}

<div class="col">
  <div class="text">.text column</div>
  <div class="img">.image column</div>
  <div class="text">.image column</div>
  <div class="img">.text column</div>

</div>

I've attached screenshots for someone to view.  

This is the code block in question with the div's I need to stack in bold. 

Thanks for any help with this.