Bootstrap поменять местами блоки: Как в bootstrap 4 менять местами блоки при адаптации? — Хабр Q&A

Leave a Comment / Разное / By /

css — Поменять местами столбцы при уменьшении разрешения?

Есть такая разметка:

<div>
    <div>
        <div>Тут текст</div>
        <div>Тут изображение</div>
    </div>
</div>

При уменьшения разрешения:

Как видно при маленьком разрешении col-sm-9 становится первым, а за ним col-sm-3, но мне нужно что бы при уменьшении разрешения до мобильного(768), col-sm-3 становился первым, а за ним был col-sm-9. Сделал два col-sm-3: первый — col-sm-3 visible-xs, второй — col-sm-3 hidden-xs. Такой способ работает, но хотелось бы узнать более изящный способ решить данный вопрос, так-как то что я использую загружает дважды одну и туже картинку.

  • css
  • bootstrap
2

Надо поменять колонки местами и добавить к колонкам классы ..-pull/push-..

<div>
  <div>
    <div>Тут изображение</div>
    <div>Тут текст</div>
  </div>
</div>

В документации есть исчерпывающий ответ на ваш вопрос, каким образом менять местами колонки на разных экранах

Следайте так: используйте . col-md-9 для md-разрешения и sm для sm-разрешения.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
</head>

<body>

  <div>
    <div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, voluptatum dolores suscipit maiores et, voluptas deleniti rem magni sed dolore non placeat nihil id doloribus consectetur odit ratione quia nulla!</div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Dignissimos optio rem, nihil sint id nam ipsam suscipit! Dolor consequatur eum reiciendis. Reiciendis fugiat autem vero labore a dicta est rem.</div>
    </div>
  </div>

</body>

</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Как поменять местами блоки div в мобильной версии сайта

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

Смотрите сами. Как работала мобильная версия? Сайт определял, что его открывают в мобильном браузере, и вместо обычной, выводил мобильную версию.

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

Скажу только, что если вопросы разработки web-ресурсов вызывают у вас сложности, а сайт нужен не «когда-нибудь», а в приемлемые сроки, то выгоднее обратиться к специалистам и заказать. Где угодно. Потому, что каждый должен заниматься своим делом. Веб-мастер — делать сайты. Предприниматель — деньги.

Адаптивная верстка

Адаптивной верстке глубоко плевать на чем запускается сайт. Он просто приспособится под ширину экрана от, допустим, 480px в ширину до 2400px и выше. Т.е., что мобила, что широченный телевизор, сайту все-едино. Прелесть, правда?)

Чтобы не мучиться и не изобретать свой велосипед, кое-кто придумал Bootstrap. Это готовый набор js и css файлов. При том, Bootstrap позволяет делать с сайтом много чего интересного, и сам по себе заслуживает не просто отдельного поста, а целой серии. Я сам знаю о нем всего-ничего, но даже этого хватило, чтобы оценить возможности и удобство.

Перемещение блоков

А теперь о главном. Сейчас как раз верстаю очередной сайт. В его шапке четыре блока идущие друг за другом. Ну вот так, как на рисунке.

Проблема в том, что на узких экранах они выстраиваются вот так.

Мне же нужно, чтобы вот так.

Конечно это можно сделать несколькими способами без всякого Bootstrap’а. Но во-первых, в данном проекте я его УЖЕ использую. Точнее, только сетку от него, но и этого будет достаточно. Во-вторых, давайте кратенько эти способы перечислю.

Способ 1: float (css)

Способ вполне годный, когда надо передвинуть поменять местами пару колонок. В моем случае двигаются сразу три колонки, в т.ч. по вертикале. Неудобно!

Способ 2: flex (css)

Слишком много возни. Да и деформирует блоки так, как мне не нужно.

Способ 3: jQuery (Java Script)

На самом деле это сразу несколько способов. Отлавливаем разрешение экрана и в зависимости от нее скрипт будет перемещать блоки. Но это долго и это костыли. Что если таких передвигаемых блоков окажется штук 50 по всей странице? Под каждый писать отдельный код? Я уже молчу как это скажется на быстродействии сайта.

Способ 4: Bootstrap

А теперь Bootstrap. Все предельно просто. Имеем html-код.

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

Если разделить шапку на 12 частей, то на экране over 1200px, в моем проекте, первый div занимает 2/12, второй 5/12, третий 3/12, четвертый 2/12. На экранах менее 700+px каждый блок занимает целую строку (12/12).

Для примера возьму всего два размерных класса сетки Bootstrap: .col-lg-* (широкий экран от 1170px) и col-sm-* (узкий экран 750px и меньше).

Вот так выглядит код после присвоения указанных классов.

<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

Видите? Размер блоков для разных экранов, согласно сетке (из 12 ячеек), выражен цифрой в классе.

Оптимизируем html-код под узкий экран. Т.е. просто изменим порядок блоков под мобильный экран, а двигать будем на уже крупном. Так легче.

<div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>4</div>
</div>

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

Добавим классы, которые поменяют местами блоки для широкоэкранной версии сайта так, чтобы они шли в изначальном порядке (1, 2, 3, 4), а в мобильной остались соответственно разметке (2, 3, 1, 4).

col-lg-pull-* перемещает блок влево.
col-lg-push-* перемещает блок вправо.

<div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>4</div>
</div>

Всё. Теперь на мониторе колонки строятся так, как и требовалось изначально.

Забавный факт

Здесь есть одна странность, которую не совсем понял. Цифра в классе col-lg-push-* указывает на какое количество ячеек нужно сдвинуть правый край блока вправо. Так блок с цифрой 2 был сдвинут на 2 ячейки. То же самое произошло с блоком с цифрой 3.

В итоге, в начале сетки освободилось 2 ячейки под блок с цифрой 1. НО, чтобы туда добраться нужно преодолеть влево 8 ячеек, а блоку хватило 7.
Из этого (проведя несколько экспериментов) делаю вывод, что цифра в классе col-*-pull-* указывает сдвиг блока влево на указанное число ячеек минус 1. В моем случае 7 (8-1).

О том, как подключить сетку Bootstrap к сайту, в рамках этого поста, освещать не стану. Инфы на данную тему в интернете и так полно. И все же, возможно, в будущем сделаю под это дело отдельный пост.

Однако, вы уже видите, насколько Bootstrap удобен. Всего-то и делов, что присвоить блокам нужные классы.

На этом пока всё. Не забывайте подписываться на обновления блога и делиться ссылкой на этот пост с друзьями в соцсетях. Спасибо, что читаете.

html — Bootstrap, перестановка двух элементов местами

Задавать вопрос

спросил

Изменено 3 года, 4 месяца назад

Просмотрено 727 раз

Я впервые за долгое время создаю веб-сайт, и кажется, что Bootstrap сильно изменился с тех пор, как я им в последний раз пользовался.

Итак, у меня есть два элемента div:

 

    
Один



<дел>
    
Два

Таким образом, Два , конечно же, будут отображаться в правом столбце

Раньше, если я хотел, чтобы они менялись сторонами, я просто перемещал «Один» вправо, а «Два» — влево.

Но это больше не работает (я думаю, это связано с Flexbox?)… и я читал, что установка автоматических полей может использоваться вместо плавающих элементов.

Тем не менее, я попробовал следующее, и оба div остались такими, какие они есть:

 .one {
    поле слева: авто;
}
.два {
    поле справа: авто;
}

Есть ли обходной путь без изменения разметки?

  • html
  • css
  • twitter-bootstrap
  • flexbox
  • css-float

Я не знаю, есть ли родное решение для бутстрапа, но вы определенно мог бы использовать flex-direction: row-reverse ; свойство для этого.

Взгляните на фрагмент ниже:

 .row-reverse {
  flex-направление: строка-реверс;
} 
 

<дел>
  <дел>
    
Один
<дел>

Два

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

javascript — Замена элементов Bootstrap в зависимости от размера экрана

Мне было интересно, существует ли собственный метод начальной загрузки для динамического изменения класса элемента в зависимости от размера экрана.

Я разрабатываю веб-страницу с несколькими элементами карточек, содержащими прокручиваемый текст. При просмотре на рабочем столе проблем нет, карты расположены горизонтально. При просмотре на мобильном телефоне карточки расположены вертикально, из этого следует, что для перемещения экрана и переключения с одной карточки на другую мне приходится прокручивать весь текст одной карточки, прежде чем дойти до следующей.

Документирование в начальной загрузке Я видел, что элемент типа аккордеона может помочь мне, при этом пользователь активно решит переключить аккордеон, чтобы прочитать содержимое, и снова переключить его, чтобы «закрыть» его и прокрутить экран

Я был просто интересно, может ли это переключение происходить напрямую через начальную загрузку или это должно быть сделано через javascript, и, прежде всего, как

Accordion