HaruAtari
@HaruAtari

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

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

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

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

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

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

3c0c831aa1894349a94e2f86773b3050.png
bd6665d33fbd4327983fa86afda34ebe.png
fe5580349eb74d34b9caadcbf0aca685.png
  • Вопрос задан
  • 4800 просмотров
Пригласить эксперта
Ответы на вопрос 3
alexdevid
@alexdevid
web-developer
<div class="col-md-4 col-sm-6 col-xs-6">...</div>
как-то так

подправил
jsfiddle.net/u9naX
Ответ написан
cyber-jet
@cyber-jet
Как вы написали при помощи медиазапросов не получится, можно только так:

1 2 3
4 5 6
...

1 2
3 4
...

1
2
..
Ответ написан
@TsSaltan
А если так?
Там можно подвинуть ползунок и посмотреть как будут отображаться блоки в зависимости от размера экрана
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы