grid div positioning differently on mobile for some columns

Question

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.

With proper use of classnaming, you could apply some flex-box rules that can easily reverse the direction of the columns in a row — Kees van Lierop, Jan 13 '17 at 09:20

score 0 · Answer 1 · edited Jan 13 '17 at 09:43

Thanks to @lalji Tadhani in the comments I was able to figure out how to fix this issue.

The main problem in my thinking was not thinking mobile first.

You can apperantly pull and push lg columns. As soon as I knew this a solution was easy.

Every reverse column on lg screen I added

col-lg-6 col-lg-push-6 col-xs-12

And the second col in that row was

col-lg-6 col-lg-pull-6 col-xs-12

The structure was right on XS, and then I pushed and pulled the cols for larger screen into place.

grid div positioning differently on mobile for some columns

1 Answers1