Bootstrap3 change the grid when the screen is reduced

Question

There is a 5x3 grid at normal resolution.

<div class="row"> <div class="col-md-2"> <img src="img/brand-art.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-km.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-linc.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-school.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-sonet.png" alt=""> </div> </div> <div class="row"> <div class="col-md-2"> <img src="img/brand-tukzar.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-silwerhof.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-hatber.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-brauberg.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-ek.png" alt=""> </div> </div> <div class="row"> <div class="col-md-2"> <img src="img/brand-berlingo.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-stamm.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-stabilo.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-gamma.png" alt=""> </div> <div class="col-md-2 col-half-offset"> <img src="img/brand-luch.png" alt=""> </div> </div>

When reducing the screen size <992px, you need to redo the grid in 3x5, how can this be implemented?

kizoso 8,109 3 18 46 · Answer 1 · 2017-01-23T10:11:19

As I understand, your option is suitable for this option, everything is entered in one row, and something like this is written:

 <div class="col-md-4 col-lg-2 col-half-offset"> <img src="img/brand-gamma.png" alt=""> </div>

Since the grid is not divided into 5 columns, you can add to the last element of the row:

 <div class="col-md-4 col-lg-offset-2 col-lg-2 col-half-offset"> <img src="img/brand-gamma.png" alt=""> </div>

As a result, you should get this structure:

 <div class="row"> <div class="col-md-4 col-lg-2"> <img src="img/brand-art.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-km.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-linc.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-school.png" alt=""> </div> <div class="col-md-4 col-lg-2 col-lg-offset-2"> <img src="img/brand-sonet.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-tukzar.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-silwerhof.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-hatber.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-brauberg.png" alt=""> </div> <div class="col-md-4 col-lg-2 col-lg-offset-2"> <img src="img/brand-ek.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-berlingo.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-stamm.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-stabilo.png" alt=""> </div> <div class="col-md-4 col-lg-2"> <img src="img/brand-gamma.png" alt=""> </div> <div class="col-md-4 col-lg-2 col-lg-offset-2"> <img src="img/brand-luch.png" alt=""> </div> </div>

for some reason, when decreasing, it first rises in 4 columns, then everything in 1
yes, but instead of col-lg-offset-2 I use col-half-offset for each element

Bootstrap3 change the grid when the screen is reduced

1 answer 1

More articles: