1

Суть такая что этот блок должен стоять в этом месте.

Как это возможно сделать с помощью Bootstrap?

введите сюда описание изображения

<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>
2
  • Вам должно помочь применение простого .col-md-4 {float: right;}, ну, либо я чего-то не понимаю. Commented 2 апр. 2016 в 17:14
  • при данном html – никак
    – xaja
    Commented 2 апр. 2016 в 23:57

2 ответа 2

1

Будет интереснее менять количество столбцов - от двух на самом узком экране до шести на самом широком. Для этого заменим класс 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>

1

Вы не правильно строете размету, попробуйте так:

<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>

Перед последними 4-мя div элементами для сброса строки:

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

И ознакомитесь на будущее с классом .clearfix или же используйте .row для каждой вашей строки, а элементу добавьте класс .pull-right.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.