Адаптивная верстка - меньше 480px. Push и Pull

@sheriff5 · Регистрация: 30.12.2012

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

Всем привет!
Сделал адаптивную верстку сайта до 480 px.
А вот дальше возникает проблема:
Надо элементы поменять местами, через Push и Pull, или как-то по-другому.
Вот код:

HTML5
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
<div class="span12 tel-skype">              
    <p><i class="icon-phone-sign"></i> 0551 980 945</p>                     
</div>  
<div class="span12 product-background">
        <div class="row">
                <div class="span4 number1 product-image">
                         <img class="foto" src="assets/img/6.png" alt="">
                 </div>
                  <div class="span4 number2 product-title">
            <img src="assets/img/logo.png" alt="">
                        <h1>шоу-группа<br><strong>"ИЛЛЮМИНАТЫ"</strong></h1>
                        <div class="product-description bold">
                            <h2><i>ТАК не умеет никто</i></h2>                        
                        </div>
                 </div>
        <div class="span4 number3 product-image">
                          <img class="foto" src="assets/img/5.png" alt="">
                 </div>
             </div>
      </div>
      <div class="span12 ffg2">
                            Здесь 4 дива с видео.
      </div>
</div>
</div>

Я не смог найти нормальное видео на ЮТубе. На экране меньше 480px надо сделать.
Кто-нибудь может объяснить:
1) как первый класс "tel-skype" перекинуть ниже всех видео;
2) Как первым на экран пустить класс "number2", включающий в себя логотип, название и описание шоу-группы;
3) А после него уже оставшиеся два класса "number1" и "number3", включающие две фотографии.
4) Ну а видео я сам думаю вставлю.

Буду признателен за помощь!

Добавлено через 16 часов 26 минут
"Причина: Используйте соответствующие теги в редакторе для форматирования кода!"

Я же писал выше что использовал теги до 480 px, а теперь их надо менять местами, а номер телефона вообще вниз перекидывать!

Но вот как связать "col-xs-12", "push" и "pull" с размером 480px - никак не могу понять. И найти видео не могу!

Добавлено через 20 часов 58 минут
На этом форуме есть вообще верстальщики?
Если нет, то можно дать ссылку на их форум???

@AlexZaw · 23.12.2017, 12:11

Тут только один выход из ситуации (если не использовать js).
Используйте флексы и их свойство order.

PS.Что вы подразумеваете под push и pull вообще непонятно

ORLENOK · 23.12.2017, 21:20

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

PS.Что вы подразумеваете под push и pull вообще непонятно

Вероятно фреймворк bootstrap и его свойства col-*-pull-* и col-*-push-*. Которые меняют элементы местами.

@sheriff5 · 24.12.2017, 09:02 **[ТС]**

Да, ORLENOK прав!
Я хотел поменять местами дивы при помощи col-*-pull-* и col-*-push-*.
Кто-нибудь менял местами дивы при помощи Push и Pull для мобильной версии???
Я сейчас попробую задействовать флекс и ордер, но главная цель - понять как работает Push и Pull для мобильной версии!
Жду ответов именно на этот вопрос!
Заранее спасибо!

@AlexZaw · 24.12.2017, 11:25

bootstrap почти не знаю, но push и pull вроде как двигают элементы в пределах одного ряда, вам же получается нужно поменять местами элементы из разных рядов, делайте выводы

ORLENOK · 24.12.2017, 11:57

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

2) Как первым на экран пустить класс "number2", включающий в себя логотип, название и описание шоу-группы;
3) А после него уже оставшиеся два класса "number1" и "number3", включающие две фотографии.

По логике, sheriff5, не понимаю смысла искать видео. Читать тоже можно. Документация пишется, а не снимается на видео.

Сайт с подробным описанием [не реклама]: https://itchief.ru/lessons/boo... rid-system

По этому примеру ваш код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row">
    <div class="span4 number2 product-title col-xs-12 col-md-6 col-md-push-3">
        <img src="assets/img/logo.png" alt="">
        <h1>шоу-группа<br><strong>"ИЛЛЮМИНАТЫ"</strong></h1>
        <div class="product-description bold">
            <h2><i>ТАК не умеет никто</i></h2>                        
        </div>
    </div>
    <div class="span4 number1 product-image col-xs-12 col-md-3 col-md-pull-6">
        <img class="foto" src="assets/img/6.png" alt="">
    </div>
    <div class="span4 number3 product-image col-xs-12 col-md-3">
        <img class="foto" src="assets/img/5.png" alt="">
    </div>
</div>

Код запускать не пробовал.

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

@Fedor92 · 24.12.2017, 12:39

sheriff5, ну вот смотрите, в сетке bootstrap стили указанные для класса col-xs применяются на всех разрешениях ниже 768px... Исходя из условий Вашей задачи необходимо создать свой кастомизированный класс и задать для него в стилях отдельный медиазапрос для экранов с разрешением до 480px... Если я правильно понял смысл того, что Вы пытаетесь реализовать...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	23.12.2017, 12:11
	Тут только один выход из ситуации (если не использовать js). Используйте флексы и их свойство order. PS.Что вы подразумеваете под push и pull вообще непонятно 0

@sheriff5 0 / 0 / 0 Регистрация: 30.12.2012 Сообщений: 100
	24.12.2017, 09:02 [ТС]
	Да, ORLENOK прав! Я хотел поменять местами дивы при помощи col--pull- и col--push-. Кто-нибудь менял местами дивы при помощи Push и Pull для мобильной версии??? Я сейчас попробую задействовать флекс и ордер, но главная цель - понять как работает Push и Pull для мобильной версии! Жду ответов именно на этот вопрос! Заранее спасибо! 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	24.12.2017, 11:25
	bootstrap почти не знаю, но push и pull вроде как двигают элементы в пределах одного ряда, вам же получается нужно поменять местами элементы из разных рядов, делайте выводы 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	24.12.2017, 12:39
	sheriff5, ну вот смотрите, в сетке bootstrap стили указанные для класса col-xs применяются на всех разрешениях ниже 768px... Исходя из условий Вашей задачи необходимо создать свой кастомизированный класс и задать для него в стилях отдельный медиазапрос для экранов с разрешением до 480px... Если я правильно понял смысл того, что Вы пытаетесь реализовать... 0