Отображение код в разных местах на разных разрешениях

Данная задача имеет решение через переписывание кода при помощи жабаскрипта.

ЗЫ: А приминение - от слова "мина"? 🤪

---------- Добавлено 27.10.2018 в 20:52 ----------

Просьба откликнуться тем, кто действительно может помочь по существу

Решение нужно для того, чтобы на мобильной версии не скрывать текст. А переместить его в более удобное место, чтобы сделать акцент на более важной информации. И для СЕО будет полезно. Потому что через скрытие придется дублировать контент для отображения в другом месте. Надеюсь, вы меня поймете.

S_A_N_T_A, А чё только болдом долбаем? Давай ещё шрифт увеличь в 2 раза и сделай его красным. 😂

S_A_N_T_A, @media и flexbox решат этот вопрос.

Оптимизайка, по условиям задачи исходный код требуется переписывать, а не визуально блоки переставлять.

Спасибо! Очень интересное решение. Надеюсь в моем случае все таки удастся его применить. Уже как несколько часов тестирую. На примерах все отлично получается. Но в моем случае (он несколько отличается от картинки которую скинул), пока реализовать не получилось.

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

Сложность в том, что:

1) Есть есть 3 блока которым нужно назначить порядочность отображения

2) 2 первых блока, которые расположены слева заключены в свой див

3) Далее они обтекаются третьим блоком, который должен идти справа от них

4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3

Можно через js эти блоки вставлять, но для seo не подойдет. У поисковиков плохо с индексацией контента, вставленного на страницу через js.

Через css без дублирования тоже не решить.

Можно определять устройства в php (например, через библиотеку mobiledetect), но и это не гарантирует нужного результата, потому что устройство определяется по заголовкам, а заголовки клиент может передать любые.

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

Поэтому я бы порекомендовал вам просто грамотно спроектировать адаптивный интерфейс и не изобретать костыли.

S_A_N_T_A,

Всегда сразу пишите свой пример, а не начинайте с гипотетически похожих.

То что вы спрашиваете, делается и без js и флексбоксов:

https://jsfiddle.net/du67vtnh/

melkozaur

В самую точку!

Спасибо тебе добрый человек! :)