Как «прижать» слои div друг под другом?

Question

[DmitryShishov]

Есть проблема с версткой. У меня установлен Bootstrap 3, верстка стандартная:

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
        <div class="col-md-4">4</div>
        <div class="col-md-4">5</div>
        <div class="col-md-4">6</div>
    </div>
</div>

Текущий вариант:


А нужно, чтобы слои располагались следующим образом:


Как этого добиться?

Answer 1

[archelon]

можно так:

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="block">1</div>
        <div class="block">4</div>
      </div>
      <div class="col-md-4">
        <div class="block">2</div>
        <div class="block">5</div>
      </div>
      <div class="col-md-4">
        <div class="block">3</div>
        <div class="block">6</div>
      </div>
    </div>
  </div>

а можно использовать плагин типа masonry
https://masonry.desandro.com/

Comments

[DmitryShishov]

Спасибо! Первый вариант подошел.
А что писать в классе block?

[archelon]

класс "block" для примера. он может называться по-другому. к бутстрапу не имеет отношения.
там просто ваш контент.

[DmitryShishov]

В принципе, все работает. Вот только при среднем разрешении на планшете при выводе двух столбцов выводится:
1 | 2
4 | 5
3 |
6 |

А при малом разрешении на телефоне слои идут 1-4-2-5-3-6 в один столбец, а нужно 1-2-3-4-5-6. Можно ли как-то для средних и малых разрешений поменять их расположение, не добавляя тонны лишнего кода?

Я слышал, можно сделать переупорядочивание с помощью pull и push, только не понял как правильно. Все-таки мне нужно поменять местами вот такие слои 1 а не эти внутри которых блок из нужных слоев.

p.s. Может есть еще 3-й вариант, чтобы div "прижать" по вертикали? Просто с плагинами не хочется связываться.

[archelon]

скорее всего, без js не обойтись.
или попробуйте grid, как предложил tyzberd

[DmitryShishov]

К сожалению, CSS Grid не подходит, так как весь проект на Bootstrap 3. Есть еще вот такой вариант - https://www.bootply.com/u8utESZd7j Вот только, как сделать нумерацию горизонтальной?

[archelon]

о, да. про свойство columns я и забыл.
хороший вариант, да.

Answer 2

[tyzberd]

есть еще grid, но там смотрите поддержку
https://medium.com/@andybarefoot/a-masonry-style-l...

Comments

[DmitryShishov]

Спасибо за ответ. Посмотрю.

Answer 3

[DmitryShishov]

В принципе, все работает. Вот только при среднем разрешении на планшете при выводе двух столбцов выводится:
1 | 2
4 | 5
3 |
6 |

А при малом разрешении на телефоне слои идут 1-4-2-5-3-6 в один столбец, а нужно 1-2-3-4-5-6. Можно ли как-то для средних и малых разрешений поменять их расположение, не добавляя тонны лишнего кода?

Я слышал, можно сделать переупорядочивание с помощью pull и push, только не понял как правильно. Все-таки мне нужно поменять местами вот такие слои 1 а не эти внутри которых блок из нужных слоев.