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

335
January 28, 2017, at 11:01 PM

This question already has an answer here:

  • How do I change Bootstrap 3 column order on mobile layout? 3 answers

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.

Answer 1

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.

Rent Charter Buses Company
READ ALSO
How to Allow Users To Change The Background Image and the images is store in the database by their url

How to Allow Users To Change The Background Image and the images is store in the database by their url

this is my codei want is when i click the set background button the background image will change

359
How to add overlay over image in swiper slider that will fit the image on all size screens

How to add overlay over image in swiper slider that will fit the image on all size screens

I am using swiper slider in my projectAnd I have set it to have to 4 images on big screens, and one image in slider for smaller screens

618
How to archive jumping to another div when scrolling like on affinity.serif.com?

How to archive jumping to another div when scrolling like on affinity.serif.com?

I want to build a page where the user is taken to the next full high div immediately when he scrolls down or up(Working example of the "jump scroll" effect I mean: Affinity Photo & Designer

344
The index unused when apply transform

The index unused when apply transform

demo I want to translate the first div, when hovered

441