The essence is that this unit should be in this place.

How is it possible to do with pom. bootstrap

enter image description here

<div class="container"> <div class="row"> <div class="col-md-9"> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> <div class="col-md-4"><div class="photos"></div></div> </div> <div class="col-md-3 "> <div class="photos2"></div> </div> </div> </div>
  • You should be helped by the use of a simple .col-md-4 {float: right;} , or I don’t understand something. - malginovdesign
  • with this html - no way - xaja

2 answers 2

It will be more interesting to change the number of columns - from two on the narrowest screen to six on the widest. To do this, replace the class col-md-4 with col-xs-6 col-sm-4 col-md-3 col-lg-2 .

All cells are placed in one row. Green block put first.

Option 1 . We add the pull-right class to all cells.

The disadvantage is that if the latter is not completely filled, then the cells will be pressed to the right and there will be empty space to the left.

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .photos { background-color: #ccc; height: 40px; margin-bottom: 10px; } .photos-2 { background-color: #093; height: 60px; } 
 <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos-2"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos"></div></div> </div> </div>

Option 2 . Add a pull-right only to the first green cell and arrange clearfix . If gray blocks are the same height, then only one clearfix needed for each screen width.

Disadvantage: to calculate the markup, you need to know how green the block is above gray ones.

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .photos { background-color: #ccc; height: 40px; margin-bottom: 10px; } .photos-2 { background-color: #093; height: 60px; } 
 <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 pull-right"><div class="photos-2"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="clearfix visible-sm-block"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="clearfix visible-md-block"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="clearfix visible-lg-block"></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"><div class="photos"></div></div> </div> </div>

    You do not build correctly, try this:

     <div class="container"> <div class="row"> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <!-- первая строка закончена --> <div class="clearfix visible-block"></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <!-- вторая строка закончена --> <div class="clearfix visible-block"></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <div class="col-md-3"><div class="photos"></div></div> <!-- третья строка закончена --> <div class="clearfix visible-block"></div> </div> </div>

    Before the last 4 div elements to reset the string:

     <div class="clearfix visible-block"></div>

    And familiarize yourself with the future .clearfix class .clearfix or use .row for each of your lines, and add a .pull-right class to the .pull-right .