Мобильная верстка(позиционирование блоков)

@morgusha · Регистрация: 21.05.2009

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

Ребят, подскажите пожалуйста !
Необходимо реализовать мобильную верстку сайта по принципу css файла. То-есть мобильная версия открывается без перехода на поддомен и без использования отдельного файла шаблона для моб версии !
Ну css файл я подключил.
Но тут встал вопрос...дизайнер нарисовал блоки и они располагаются ни так как на нормальной версии сайта !
Вот пример:
Полная версия сайта :

HTML5
1
2
3
<div id="">header</div>
<div id="">content</div>
<div id="">left_menu</div>

А в мобильной уже так вот располагаются:

HTML5
1
2
3
<div id="">header</div>
<div id="">left_menu</div>
<div id="">content</div>

Вопрос как их поменять местами не используя position: absolute так как это не логично и не верно !
Может моЖно в шаблоне какое то условие ставить типа, если это моб версия, то выводить иначе ?
Не могу понять как делать !

@shvyrevvg · 01.11.2017, 16:22

morgusha, покажите макет.

@morgusha · 01.11.2017, 16:24 **[ТС]**

вот сайт
а вот что надо для моб версии

@morgusha · 01.11.2017, 16:30 **[ТС]**

то-есть там блоки расставлены совсем иначе нежели в норм версии ! это дизайнер не досмотрела что ли или можно как то выйти из положения ?

@shvyrevvg · 01.11.2017, 16:30

morgusha, а почему не сделать для десктопа и мобильных такую разметку?

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

<div id="">header</div>
<div id="">left_menu</div>
<div id="">content</div>

@morgusha · 01.11.2017, 16:32 **[ТС]**

ну потому что основной сайт уже давно сделан и работает ! а моб версию вот только что приспичило ! а переделывать структуру шаблона это переделывать и css и кучу всего !

@shvyrevvg · 01.11.2017, 16:37

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

ну потому что основной сайт уже давно сделан и работает !

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

то-есть там блоки расставлены совсем иначе нежели в норм версии ! это дизайнер не досмотрела что ли или можно как то выйти из положения ?

Имхо это верстальщик нелогично сделал. По идее с помощью флексов можно поменять местами.

@morgusha · 01.11.2017, 16:39 **[ТС]**

так когда верстался основной сайт не было ещё и мыслей о мобильной версии

@shvyrevvg · 01.11.2017, 16:44

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

а переделывать структуру шаблона это переделывать и css и кучу всего !

В разметке 2 строки местами поменять.

@morgusha · 01.11.2017, 17:24 **[ТС]**

ясно ! это битрикс там все гораздо неудобнее ! разные части шаблона главного подцепляются из разных файлов итд итп
эх...лан буду думать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 была полностью переписана на Си, в. . .

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	01.11.2017, 16:22
	morgusha, покажите макет. 0

@morgusha 2 / 2 / 2 Регистрация: 21.05.2009 Сообщений: 300
	01.11.2017, 16:24 [ТС]
	вот сайт а вот что надо для моб версии Миниатюры 0

@morgusha 2 / 2 / 2 Регистрация: 21.05.2009 Сообщений: 300
	01.11.2017, 16:30 [ТС]
	то-есть там блоки расставлены совсем иначе нежели в норм версии ! это дизайнер не досмотрела что ли или можно как то выйти из положения ? 0

@morgusha 2 / 2 / 2 Регистрация: 21.05.2009 Сообщений: 300
	01.11.2017, 16:32 [ТС]
	ну потому что основной сайт уже давно сделан и работает ! а моб версию вот только что приспичило ! а переделывать структуру шаблона это переделывать и css и кучу всего ! 0

@morgusha 2 / 2 / 2 Регистрация: 21.05.2009 Сообщений: 300
	01.11.2017, 16:39 [ТС]
	так когда верстался основной сайт не было ещё и мыслей о мобильной версии 0

@morgusha 2 / 2 / 2 Регистрация: 21.05.2009 Сообщений: 300
	01.11.2017, 17:24 [ТС]
	ясно ! это битрикс там все гораздо неудобнее ! разные части шаблона главного подцепляются из разных файлов итд итп эх...лан буду думать 0