Bootstrap 3. Изменение порядка следования адаптивных блоков

@Yura1976 · Регистрация: 06.03.2014

Студворк — интернет-сервис помощи студентам

Необходимо, чтобы блоки размещались при разрешениях от 768px как показано на схеме 1:

Bootstrap 3. Изменение порядка следования адаптивных блоков

а при меньших разрешениях - как на схеме 2:

Т.е., фактически, нужно, чтобы при разрешениях менее 768px блок 2 располагался между строк (<div class="row">...</div>) 1 и 3.
Использование .col-md-push-{nc} и .col-md-pull-{nc} не помогает (или я его не правильно использую). Была мысль показать в верстке блок 2 дважды (слева и между строк 1 и 3) и левый блок 2 скрывать при разрешениях < 768 с помощью hidden-xs и hidden-sm, и отображать тот блок между 1 и 3. Но в таком случае вся информация блока 2 будет подгружаться дважды, что не есть хорошо.
Возможно ли такое корректно реализовать, используя bootstrap 3? Если да, то как? Кто знает, наведите, пожалуйста, хотя бы на мысль.
Заранее спасибо!

Qwerty_Wasd · 03.02.2019, 03:28

Yura1976, один из вариантов - https://codepen.io/qwerty_wasd/pen/ErmOmy
пример сделан на bootstrap 3. Перейдите уже на 4-ый. На флексах такие задачи проще решать.

HTML5
1
2
3
4
5
6
7
<div class="container-fluid">
  <div class="row">
    <div class="a col-xs-12 col-sm-8 col-sm-push-4">1</div>
    <div class="b col-xs-12 col-sm-4 col-sm-pull-8">2</div>
    <div class="c col-xs-12 col-sm-8 col-sm-push-4">3</div>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.a, .b, .c {
  border: 2px solid red;
  height: 30vh;
}
 
/* стили выше - косметика*/
@media (min-width: 768px) {
  .b {
    position: absolute;
    height: 60vh;
  }
}

@Yura1976 · 03.02.2019, 15:41 **[ТС]**

Qwerty_Wasd, спасибо за ответ! Все отлично работает, только теперь контент левой колонки (т.е., блока 2) наезжает на футер (в вопросе в этом посте я его не привел, хотя нужно было бы для отражения более полной картины). Контент - динамический, поэтому с высотой не все просто. Но буду думать. Буду признателен, если наведете на мысль, как это исправить. Наверняка, это не сложно, но что-то пока не соображу как.

По поводу

Сообщение от Qwerty_Wasd

Перейдите уже на 4-ый.

Дело в том, что проект начат давно на Yii2, и, если сейчас переходить на bootstrap-4, то это не быстро, многие используемые там виджеты работают с bootstrap 3. Целесообразнее его закончить, используя bootstrap 3, а уже в следующих проектах буду переходить на четверку.

@AlexZaw · 03.02.2019, 15:51

Yura1976, вот вы и столкнулись с минусом фреймворков, да еще и с использующими "старые" технологии. Бутстрап 3 не предназначен для подобных задач. А вот нативные флексы и гриды (да даже тот же бутстрап 4 который использует флексы) - легко справляются с данной задачей. Теперь, самые безболезненные способы, либо писать собственные стили для этого блока на нативном css, либо писать костыли на js.

Qwerty_Wasd · 03.02.2019, 17:16

AlexZaw, привет

Yura1976,

Сообщение от Yura1976

как это исправить

я же Вам написал

Сообщение от Qwerty_Wasd

На флексах такие задачи проще решать

И коллега также указал Вам

Сообщение от AlexZaw

А вот нативные флексы и гриды........ - легко справляются с данной задачей.

Пример на флекс - https://codepen.io/qwerty_wasd/pen/ZwyYGB

HTML5
1
2
3
4
5
<div class="module-flex_grid-content">
  <div class="item top">1</div>
  <div class="item aside">2</div>
  <div class="item bottom">3</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
 
.module-flex_grid-content {
  border: 2px solid red;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  padding: 50px;
  height: 100%;
}
.module-flex_grid-content .item {
  border: 2px solid #000000;
  flex-grow: 1;
}
.module-flex_grid-content .top {
  order: 1;
}
.module-flex_grid-content .aside {
  order: 2;
}
.module-flex_grid-content .bottom {
  order: 3;
}
 
@media (min-width: 768px) {
  .module-flex_grid-content {
    justify-content: flex-end;
    padding: 50px;
    height: 100%;
    width: 100%;
  }
  .module-flex_grid-content .item {
    width: 50%;
  }
  .module-flex_grid-content .top {
    order: 2;
    height: 50%;
  }
  .module-flex_grid-content .aside {
    order: 1;
    height: 100%;
  }
  .module-flex_grid-content .bottom {
    order: 3;
    height: 50%;
  }
}

@Yura1976 · 04.02.2019, 15:16 **[ТС]**

Qwerty_Wasd, спасибо за ответ! Сама идея вроде понятна. Блоки выравниваются так как нужно. Но есть проблема.
Футер не виден. Но это решил, убрав overflow:hidden для body.
Если контента много, то этот контент выходит за пределы границ блока и налезает на футер. Чувствую, что не хватает знаний по флексам (возможно, и не только по флексам), буду пытаться разобраться.
Если не затруднит, подскажите, как решить проблему.

Qwerty_Wasd · 04.02.2019, 15:30

Yura1976,

Сообщение от Yura1976

Если не затруднит, подскажите, как решить проблему.

Сообщение от Yura1976

контент выходит за пределы границ блока и налезает на футер

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

Добавлено через 1 минуту
Вариантов как сделать это

Сообщение от Yura1976

контент выходит за пределы границ блока и налезает на футер

множество, а посему и решение будет зависеть от нюансов

@Yura1976 · 04.02.2019, 16:30 **[ТС]**

Qwerty_Wasd,
https://codepen.io/jurij1976/pen/daRQpO
Код твой, только добавил футер с соответствующим классом и убрал overflow:hidden для body. Ну и контент добавил (lorem ipsum).
В моем проекте тоже самое, только контент - с большим объемом верстки, плюс еще есть шапка, и обертка .wrap. Но проблема та же.
Пробовал играться со свойством height и min-height, ничего хорошего не выходит. При min-height все блоки выстраиваются в колонку и при больших разрешениях тоже.

Qwerty_Wasd · 04.02.2019, 18:07

Yura1976, есть вариант добавить overflow item'ам, но Вас это вряд ли устроит. Даже с учетом того что я нифига не рублю в дизайне, этот вариант даже мне не нравится. Без вмешательства JS, остается только grid.
https://codepen.io/qwerty_wasd/pen/ZwyYGB

HTML5
1
2
3
4
5
6
<div class="module-grid-content">
  <div class="item top">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas cupiditate reprehenderit inventore quod omnis neque officiis fuga delectus possimus? Alias odit inventore ab, ut neque odio similique quisquam blanditiis eaque.Odit, eligendi explicabo eum ipsum molestiae culpa? Sequi cumque quidem sapiente necessitatibus aut itaque, quas quis, laudantium, alias excepturi quo vero obcaecati est magnam deserunt eum consequuntur eius ullam nulla.Animi nesciunt perferendis obcaecati commodi maxime reprehenderit beatae ipsum doloribus alias hic distinctio explicabo, ut sint ducimus minima a neque non ex suscipit, aspernatur totam consectetur! Voluptates facilis et non.Dolor neque magni, sit maiores quis assumenda labore nesciunt est at voluptate, sequi molestiae eaque iusto, vero explicabo. Minima dicta similique suscipit unde excepturi ducimus magnam, et tempore quam in!Maiores, est magnam ea modi incidunt omnis minima esse alias veritatis optio neque quibusdam sequi officiis ab, rerum inventore maxime aspernatur ducimus voluptatum, illo quis. Expedita fugit nulla veritatis deserunt!</div>
  <div class="item aside">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas cupiditate reprehenderit inventore quod omnis neque officiis fuga delectus possimus? Alias odit inventore ab, ut neque odio similique quisquam blanditiis eaque.Odit, eligendi explicabo eum ipsum molestiae culpa? Sequi cumque quidem sapiente necessitatibus aut itaque, quas quis, laudantium, alias excepturi quo vero obcaecati est magnam deserunt eum consequuntur eius ullam nulla.Animi nesciunt perferendis obcaecati commodi maxime reprehenderit beatae ipsum doloribus alias hic distinctio explicabo, ut sint ducimus minima a neque non ex suscipit, aspernatur totam consectetur! Voluptates facilis et non.Dolor neque magni, sit maiores quis assumenda labore nesciunt est at voluptate, sequi molestiae eaque iusto, vero explicabo. Minima dicta similique suscipit unde excepturi ducimus magnam, et tempore quam in!Maiores, est magnam ea modi incidunt omnis minima esse alias veritatis optio neque quibusdam sequi officiis ab, rerum inventore maxime aspernatur ducimus voluptatum, illo quis. Expedita fugit nulla veritatis deserunt!</div>
  <div class="item bottom">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas cupiditate reprehenderit inventore quod omnis neque officiis fuga delectus possimus? Alias odit inventore ab, ut neque odio similique quisquam blanditiis eaque.Odit, eligendi explicabo eum ipsum molestiae culpa? Sequi cumque quidem sapiente necessitatibus aut itaque, quas quis, laudantium, alias excepturi quo vero obcaecati est magnam deserunt eum consequuntur eius ullam nulla.Animi nesciunt perferendis obcaecati commodi maxime reprehenderit beatae ipsum doloribus alias hic distinctio explicabo, ut sint ducimus minima a neque non ex suscipit, aspernatur totam consectetur! Voluptates facilis et non.Dolor neque magni, sit maiores quis assumenda labore nesciunt est at voluptate, sequi molestiae eaque iusto, vero explicabo. Minima dicta similique suscipit unde excepturi ducimus magnam, et tempore quam in!Maiores, est magnam ea modi incidunt omnis minima esse alias veritatis optio neque quibusdam sequi officiis ab, rerum inventore maxime aspernatur ducimus voluptatum, illo quis. Expedita fugit nulla veritatis deserunt!</div>
</div>
<div class="footer">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas cupiditate reprehenderit inventore quod omnis neque officiis fuga delectus possimus? Alias odit inventore ab, ut neque odio similique quisquam blanditiis eaque.Odit, eligendi explicabo eum ipsum molestiae culpa? Sequi cumque quidem sapiente necessitatibus aut itaque, quas quis, laudantium, alias excepturi quo vero obcaecati est magnam deserunt eum consequuntur eius ullam nulla.Animi nesciunt perferendis obcaecati commodi maxime reprehenderit beatae ipsum doloribus alias hic distinctio explicabo, ut sint ducimus minima a neque non ex suscipit, aspernatur totam consectetur! Voluptates facilis et non.Dolor neque magni, sit maiores quis assumenda labore nesciunt est at voluptate, sequi molestiae eaque iusto, vero explicabo. Minima dicta similique suscipit unde excepturi ducimus magnam, et tempore quam in!Maiores, est magnam ea modi incidunt omnis minima esse alias veritatis optio neque quibusdam sequi officiis ab, rerum inventore maxime aspernatur ducimus voluptatum, illo quis. Expedita fugit nulla veritatis deserunt!</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
html,
body,
.module-grid-content {
  width: 100%;
}
 
.module-grid-content {
  border: 2px solid red;
  display: grid;
}
.module-grid-content .item {
  border: 2px solid #000000;
}
.module-grid-content .item:first-of-type {
  color: blue;
}
.module-grid-content .item:nth-of-type(2) {
  color: red;
}
.module-grid-content .item:last-of-type {
  color: green;
}
 
@media (max-width: 767px) {
  .module-grid-content {
    grid-template: repeat(3, auto)/1fr;
  }
}
@media (min-width: 768px) {
  .module-grid-content {
    display: grid;
    grid-template: repeat(2, 1fr)/repeat(2, 1fr);
    grid-template-areas: "aside top" "aside bottom";
  }
  .module-grid-content .top {
    grid-area: top;
  }
  .module-grid-content .aside {
    grid-area: aside;
  }
  .module-grid-content .bottom {
    grid-area: bottom;
  }
}
.footer {
  background: #cccccc;
}

@Yura1976 · 04.02.2019, 19:27 **[ТС]**

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

Я с гридами вообще никогда не работал; флексы когда-то смотрел, но пока еще нигде на практике не применял. Верстаю пока по старинке, использую bootstrap 3, но постараюсь найти время, чтобы начать осваивать современные технологии.
В твоем последнем варианте то что бросается в глаза - блоки top и bottom - одинаковой высоты. А фактически там объем контента может быть разным на разных страницах. Я сейчас попробую посмотреть инфу по гридам, но вряд ли быстро разберусь, чтобы эту проблему решить. Ну или, если вдруг у тебя появится мысль, буду признателен.
В любом случае, спасибо, что уделил время и хотя бы эти идеи подсказал! Я бы до этого очень долго шел бы.

Qwerty_Wasd · 04.02.2019, 19:52

Yura1976, дизайн !== код. Дизайнер это не кодер\программер. Я просто не творческий, реализовать что-то - пожалуйста.
Yura1976,

Сообщение от Yura1976

блоки top и bottom - одинаковой высоты

они вдвоем подстраиваются под высоту aside иначе выглядеть все это будет как перевернутая лестница.

Сообщение от Yura1976

В любом случае, спасибо, что уделил время и хотя бы эти идеи подсказал!

не за что, удачи

@Yura1976 · 08.02.2019, 20:19 **[ТС]**

Решил проблему с помощью jquery, а HTML оставил как было изначально с использованием bootstrap 3, без использования флексов и гридов. А в jquery использовал $(window).resize(function() {...}) и height() для соответствующих блоков.
Оказалось все гораздо проще, чем с флексами и гридами.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Yura1976 3 / 2 / 2 Регистрация: 06.03.2014 Сообщений: 20

	Bootstrap 3. Изменение порядка следования адаптивных блоков 02.02.2019, 18:03. Показов 2200. Ответов 11 Метки bootstrap, адаптивная верстка (Все метки) Необходимо, чтобы блоки размещались при разрешениях от 768px как показано на схеме 1: а при меньших разрешениях - как на схеме 2: Т.е., фактически, нужно, чтобы при разрешениях менее 768px блок 2 располагался между строк (<div class="row">...</div>) 1 и 3. Использование .col-md-push-{nc} и .col-md-pull-{nc} не помогает (или я его не правильно использую). Была мысль показать в верстке блок 2 дважды (слева и между строк 1 и 3) и левый блок 2 скрывать при разрешениях < 768 с помощью hidden-xs и hidden-sm, и отображать тот блок между 1 и 3. Но в таком случае вся информация блока 2 будет подгружаться дважды, что не есть хорошо. Возможно ли такое корректно реализовать, используя bootstrap 3? Если да, то как? Кто знает, наведите, пожалуйста, хотя бы на мысль. Заранее спасибо! 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	03.02.2019, 15:51
	Yura1976, вот вы и столкнулись с минусом фреймворков, да еще и с использующими "старые" технологии. Бутстрап 3 не предназначен для подобных задач. А вот нативные флексы и гриды (да даже тот же бутстрап 4 который использует флексы) - легко справляются с данной задачей. Теперь, самые безболезненные способы, либо писать собственные стили для этого блока на нативном css, либо писать костыли на js. 0

@Yura1976 3 / 2 / 2 Регистрация: 06.03.2014 Сообщений: 20
	04.02.2019, 15:16 [ТС]
	Qwerty_Wasd, спасибо за ответ! Сама идея вроде понятна. Блоки выравниваются так как нужно. Но есть проблема. Футер не виден. Но это решил, убрав overflow:hidden для body. Если контента много, то этот контент выходит за пределы границ блока и налезает на футер. Чувствую, что не хватает знаний по флексам (возможно, и не только по флексам), буду пытаться разобраться. Если не затруднит, подскажите, как решить проблему. 0

@Yura1976 3 / 2 / 2 Регистрация: 06.03.2014 Сообщений: 20
	04.02.2019, 16:30 [ТС]
	Qwerty_Wasd, https://codepen.io/jurij1976/pen/daRQpO Код твой, только добавил футер с соответствующим классом и убрал overflow:hidden для body. Ну и контент добавил (lorem ipsum). В моем проекте тоже самое, только контент - с большим объемом верстки, плюс еще есть шапка, и обертка .wrap. Но проблема та же. Пробовал играться со свойством height и min-height, ничего хорошего не выходит. При min-height все блоки выстраиваются в колонку и при больших разрешениях тоже. 0

@Yura1976 3 / 2 / 2 Регистрация: 06.03.2014 Сообщений: 20
	04.02.2019, 19:27 [ТС]
	Qwerty_Wasd, если ты не рубишь в дизайне, то что уж про меня говорить... Я с гридами вообще никогда не работал; флексы когда-то смотрел, но пока еще нигде на практике не применял. Верстаю пока по старинке, использую bootstrap 3, но постараюсь найти время, чтобы начать осваивать современные технологии. В твоем последнем варианте то что бросается в глаза - блоки top и bottom - одинаковой высоты. А фактически там объем контента может быть разным на разных страницах. Я сейчас попробую посмотреть инфу по гридам, но вряд ли быстро разберусь, чтобы эту проблему решить. Ну или, если вдруг у тебя появится мысль, буду признателен. В любом случае, спасибо, что уделил время и хотя бы эти идеи подсказал! Я бы до этого очень долго шел бы. 0

@Yura1976 3 / 2 / 2 Регистрация: 06.03.2014 Сообщений: 20
	08.02.2019, 20:19 [ТС]
	Решил проблему с помощью jquery, а HTML оставил как было изначально с использованием bootstrap 3, без использования флексов и гридов. А в jquery использовал $(window).resize(function() {...}) и height() для соответствующих блоков. Оказалось все гораздо проще, чем с флексами и гридами. 0