Как расположить содержимое в несколько колонок в зависимости от ширины страницы?

Question

[MegaMufa]

Есть страница сверстаная на бутстрапе. Содрежит плитки. Эти плитки надо расположить в несколько колонок, так что бы количество колоном менялось в зависимости от ширины страницы.

Сначала я сделал так:

<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>
<div class="col-md-4 col-sm-4">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

Получается три колонки, а при просмотре с мобильного устройства они располагаются друг под другом в одну. Но нужно что бы на планшетах было две колонки. И как их организовать я без понятия.

Подскажите, как это сделать?

Answer 1

[Alexander Devid]

<div class="col-md-4 col-sm-6 col-xs-6">...</div>
как-то так

подправил
jsfiddle.net/u9naX

Comments

[MegaMufa]

@alexdevid Не могли бы вы чуть подробней. Я не совсем понял, эти классы нужно применить к каждой колонке?

[Alexander Devid]

ну ваше
<div class="col-md-4 col-sm-4">
заменить на
<div class="col-md-4 col-sm-2 col-xs-2">

[Alexander Devid]

ой нет, не так

<div class="col-md-4 col-sm-6 col-xs-6">...</div>

вот так както

Answer 2

[Евгений]

Как вы написали при помощи медиазапросов не получится, можно только так:

1 2 3
4 5 6
...

1 2
3 4
...

1
2
..

Comments

[MegaMufa]

Вот я тоже как голову не ломал, а как надо не получается.

[Евгений]

так колонки раскидывать можно только при помощи js, делать все расчёты на стороне клиента и раскидывать блоки по определённому алгоритму.

Answer 3

[Алексей]

А если так?
Там можно подвинуть ползунок и посмотреть как будут отображаться блоки в зависимости от размера экрана

Comments

[MegaMufa]

Нет, к сожалению это - не то, что надо. Грубо говоря, нужно, что бы вторая колонка пополам делилась. Но я уже понял, что просто так это сделать не получится.