You need to be able to change the grid on mobile devices

Question

It’s best to explain the photos that I count. My site.

I created a hosting for my website, so it’s easier to see.

Problem. When on mobile devices due to the way I configured it, this leads to the fact that the images do not flow correctly, as shown below.

Question: Is there a way to switch these two col-md 6s around when the screen has less than X pixels?

Answer 1

Your question will be duplicated. Ordering a div on a mobile phone . Is it possible to achieve this Mobile / Desktop layout using Bootstrap? (or another grid) or aligning the article / pull using bootstrap 3 , so I will vote for that too.

In your case, you basically do this:

CSS

.floatright {float: right;} @media (max-width: 767px) {.floatright {float: none;}}

Note the change 767 - 991 when you use the grid (col-md-). In your case, I should prefer a small grid (col-sm-), because by default the floating point is set to 767px (see Bootstrap 3 Navbar Collapse )

HTML:

<div class="container"> <div class="row"> <div class="col-sm-6">text</div> <div class="col-sm-6">img</div> </div> <div class="row"> <div class="col-sm-6 floatright">text</div> <div class="col-sm-6">img</div> </div> <div class="row"> <div class="col-sm-6">text</div> <div class="col-sm-6">img</div> </div> </div> 

You also mentioned "line 106 that col-md-6 is not in the line div". You are right, and I was mistaken here (typo). The above code is correct, with a column enclosed in rows. The docs http://getbootstrap.com/css/#grid-example-mixed-complete show that its non-required columns always add up to 12. This is not the case here, but the above will also work with all columns on the same line, for example:

 <div class="container"> <div class="row"> <div class="col-sm-6">text</div> <div class="col-sm-6">img</div> <div class="col-sm-6 floatright">text</div> <div class="col-sm-6">img</div> <div class="col-sm-6">text</div> <div class="col-sm-6">img</div> </div> </div>