• 0
gadjet

Изменение порядка блоков

Вопрос

<div>Лого</div>

<div>Текст</div>

<div>Меню</div>

Без-имени-1.png

 

Как сделать чтобы в адаптивной версии меню оказалось выше текста?

213123.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

flex не подходит. Нужен другой способ

 

В справочнике на htmlbook, кстати, нет информации про order и про flex тоже

Изменено пользователем gadjet

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 часа назад, gadjet сказал:

flex не подходит. Нужен другой способ

Тогда grid. Если и он не подходит - тогда JS, ну или делать дублирование блоков и в зависимости от ширины экрана показывать/скрывать нужные блоки.

4 часа назад, gadjet сказал:

В справочнике на htmlbook, кстати, нет информации про order и про flex тоже

Вообще-то есть. Правда там ее мало, но есть ссылки на то где можно почитать подробнее. А вообще htmlbook это старая версия сайта, новая находится по адресу https://webref.ru ну и гугл никто еще не отменял

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 часа назад, gadjet сказал:

Нужен другой способ

Другой способ это:

    CSS Grid спецификация здесь и здесь 

...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Скорее всего, проблему можно решить при помощи свойства float или direction (приминительно к inline-block элементу). Но нужно будет постараться.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

 CSS Grid - довольно удобный способ 

позволяет сделать это на пример 

так: http://jsfiddle.net/xoge9zjy/7/ 

или 

так: http://jsfiddle.net/xoge9zjy/8/

Изменено пользователем spdif

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас