grid div positioning differently on mobile for some columns [duplicate]

I need to make a page that has a different structure on mobile than on web. The web version is always reversed like so :

text webm

webm text

text webm

webm text

And the mobile version is regular like so:

text

webm

text

webm

My current structure suits my needs for web and is following:

<div class="row text-left">
  <div class="col-md-6 col-xs-12">
    Mytext
  </div>
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_1.webm', autoplay: true, loop: true) %>
  </div>
</div>
<div class="row text-right">
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_2.webm', autoplay: true, loop: true) %>
  </div>
  <div class="col-md-6 col-xs-12">
    Mytext
  </div>
</div>
<div class="row text-left">
  <div class="col-md-6 col-xs-12">
    text
  </div>
  <div class="col-md-6 col-xs-12">
    <%= video_tag('hiw_r_3.webm', autoplay: true, loop: true) %>
  </div>
</div>

But the result this yields is

text

webm

webm

text

text

webm

Now, I know I can "hack" to make this work, just add columns hidden for mobile that include the webm's every time text goes second and just hide the first webm's on mobile. Although, this would mean that the page had to load almost double the load of all the videos, which is undesireable.

Is there another way to achieve this by manipulating the structure instead of adding additional webms and hiding and showing based on a media query?

Thank you in advance.