Изменение порядка колонок на мобильной версии сайта может быть необходимостью при создании адаптивного дизайна. Bootstrap 3 предоставляет удобные инструменты для создания сетки, которая адаптируется под разные размеры экрана. Однако, стандартное поведение сетки при переходе на мобильные размеры экрана — это перестроение колонок в вертикальном порядке, что может не всегда соответствовать желаемому дизайну.
В качестве примера можно привести ситуацию, когда на десктопной версии сайта используется две колонки: сайдбар и основное содержание. При переходе на мобильный экран сайдбар перемещается на верх страницы, а основное содержание — на дно. Но что делать, если необходимо, чтобы основной контент оставался на верху страницы и на мобильной версии?
Решение проблемы
В Bootstrap 3 есть классы, которые позволяют менять порядок колонок в зависимости от размера экрана. Это классы .col-md-push-* и .col-md-pull-*, где * — это число от 1 до 12, обозначающее количество колонок, на которое нужно сдвинуть элемент.
В данном случае, чтобы основной контент оставался на верху страницы на мобильной версии, необходимо использовать класс .col-md-push-* для сайдбара и .col-md-pull-* для основного содержания. Например:
<div class="row">
<div class="col-md-9 col-md-push-3">Main content</div>
<div class="col-md-3 col-md-pull-9">Sidebar</div>
</div>
В данном случае, на десктопной версии сайта основной контент будет отображаться справа от сайдбара, так как он «сдвигается» на 3 колонки вправо, а сайдбар — «сдвигается» на 9 колонок влево. При переходе на мобильную версию эти классы перестанут действовать, и колонки отобразятся в том порядке, в котором они указаны в коде, то есть основной контент будет на верху, а сайдбар — на дне.
Таким образом, изменение порядка колонок на мобильной версии сайта в Bootstrap 3 может быть достигнуто с использованием классов .col-md-push-* и .col-md-pull-*, что позволяет создавать адаптивные дизайны, соответствующие всем требованиям.
Добавить комментарий