Будет интереснее менять количество столбцов - от двух на самом узком экране до шести на самом широком. Для этого заменим класс col-md-4
на col-xs-6 col-sm-4 col-md-3 col-lg-2
.
Все ячейки разместим в одной строке. Зелёный блок поставим первым.
Вариант 1. Всем ячейкам добавляем класс pull-right
.
Недостаток - если последняя не заполнена целиком, то ячейки прижмутся вправо и слева останется пустое пространство.
@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>
Вариант 2. Добавляем pull-right
только первой зелёной ячейке и расставляем clearfix
. Если серые блоки одинаковой высоты, то для каждой ширины экрана нужен только один clearfix
.
Недостаток: чтобы рассчитать разметку, надо знать, насколько зелёный блок выше серых.
@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>
.col-md-4 {float: right;}
, ну, либо я чего-то не понимаю.