I have the string .row , it has three <div class="col-md-4 col-sm-6 col-xs-12 </div>"> blocks. And it turns out that if these lines are 2 and I compress the screen to the size of sm, then I have this sequence of posts in the lines: 2 1 2 1, but I would like 2 2 2. I don’t know if you understood me, in general, when the post is postponed on the trail page, beside it is emptiness. How can this be fixed? This problem is obtained if you need a line with an odd number of blocks to compress, and as a result, on a smaller screen there should be an even number of posts.

    2 answers 2

    1. Bootstrap transfers to the next line everything that goes beyond the 12-column layout. Therefore, you can wrap all your columns in a single row. If the columns are the same height, then this will be enough:

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); /* Decorations */ .row { counter-reset: number; } [class*="color"] { height: 100px; } [class*="color"]:before { color: #fff; content: counter(number); counter-increment: number; font-size: 28px; font-weight: bold; left: 8px; position: absolute; top: 2px; } .color-1 { background: #936; } .color-2 { background: #693; } .color-3 { background: #369; } 
     <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> </div> </div>

    1. But if the columns are of different heights, then they will start to cling to each other and the layout will crumple. For this case the class .clearfix . Columns use the float property, and a block with .clearfix forces them to start on a new line.

      To display such a block only at the desired screen width, add the classes .visible-xs-block , .visible-sm-block , .visible-md-block and .visible-lg-block . Do not forget to foresee the appearance of .clearfix for screens wider than 1200px :

      http://codepen.io/glebkema/pen/GjGyVo

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); /* Decorations */ .row { counter-reset: number; } [class*="color"]:before { color: #fff; content: counter(number); counter-increment: number; font-size: 28px; font-weight: bold; left: 8px; position: absolute; top: 2px; } .color-1 { background: #936; height: 160px; } .color-2 { background: #693; height: 120px; } .color-3 { background: #369; height: 80px; } 
     <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="clearfix visible-xs-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="clearfix visible-sm-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="clearfix visible-xs-block visible-sm-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> <div class="clearfix visible-sm-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-1"></div> <div class="clearfix visible-xs-block"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-2"></div> <div class="col-md-3 col-sm-4 col-xs-6 color-3"></div> </div> </div>

    • Gleb, thank you so much, I was interested in the 2nd point. - Alexander Alekseev

    In the row block, display all posts, and do not divide by 3. They will be transferred according to the size

     <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> <div class="col-md-4 col-sm-6 col-xs-12"> Content </div> </div>
    • As an option - it fits, but look above the answer of Gleb, 2nd point, there will be problems here. - Alexander Alekseev
    • for modern browsers, you can add display: flex to solve a different height problem; flex-flow: row wrap; align-items: stretch; to block row and display: flex; to each column. In the 4th version of the bootstrap, this solution will be out of the box - Dmitry Kozlov