Как изменить порядок блоков в Bootstrap 3

Для того, чтобы местами менять элементы (колонки), реализованы специальные классы в Bootstrap 3 (в предыдущих версиях не тестировал).
*Push* — перенос блока ниже
*Pull* — перенос блока выше.

То есть имеем следующий макет:

bootstrap push pull

Задачей ставим, чтобы правый блок, содержащий заголовок Welcome и текст на планшетах шел первым в очереди, затем форма.
Для того, чтобы изменить порядок, нам необходимо изначально располагать в верстке блоки таким образом, каким мы хотим их видеть в мобильных версиях. Суть данных тэгов в том, что они могут поменять местами блоки, только если они располагаются горизонтально.

Поэтому пишем:

<div class="col-lg-6 col-md-push-6">{текст}</div>
<div class="col-lg-6 col-md-pull-6">{форма}</div>

Префикс -md установлен как пример. Если установить -xs, тогда переключение будет происходить на мобильной версии и так далее.

Результат:

2014   bootstrap
2 комментария
Иван Великий

То что искал. Спасибо большое.

Николай Клёнов

Пиши, какие еще трюки вспомню, расскажу.

Аксютик Денис

Помогло, спасибо)

Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное