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

Статус
Закрыто для дальнейших ответов.

S_A_N_T_A

Новичок
Регистрация
28.10.2018
Сообщения
1
Всем доброго времени суток!

Возникла задача отображать код в разных местах на разных разрешениях.

Прилагаю картинку, там все наглядно обрисовал



1) Есть есть 3 блока которым нужно назначить порядочность отображения
2) 2 первых блока, которые расположены слева заключены в свой див
3) Далее они обтекаются третьим блоком, который должен идти справа от них
4) (Блок 2) при разрешении меньше 480px, должен сместиться под блок 3
5) Решения с применением "display: none" и другими приемами скрытия не подходят. Нужно, чтобы код отображался “или там” “или там”
6) Можно и визуально блоки переставить, главное чтобы контент в исходном коде не дублировался.

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

К сожалению с программированием не знаком.

Пытался копать в сторону flexbox. Но в моем случае не получается, так как "блок 1" и "блок 2" заключены в общий div.
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
745
Для широкого окна блокам пишите css-правила:
блок1 -ширина, высота, место и другое.
блок2 -ширина, высота, место и другое.
блок3 -ширина, высота, место и другое.

Добавляете для узкого окна блокам другие css-правила заключив их в медиа-условие @media screen (ширина_экрана<480px) {
блок1 -ширина, высота, место и другое.
блок2 -ширина, высота, место и другое.
блок3 -ширина, высота, место и другое.
}

Почитайте справочники по запросу "css media"
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
3 992
Это не поможет. Пока у него два блока заперты в другом блоке.

Можно передвинуть с помощью JS, то есть вытащить его из обрамляющего блока. Но это очень плохое решение. Лучше в вёрстке изначально вытащить.

Можно через абсолютное позиционирование, если размеры фиксированные. Это точно не тот случай.
После можно на FLEX'ах или GRID'ах сделать любое сеоориентированное расположение.
То есть пока верста не будет последовательная

<div></div>
<div></div>
<div></div>
задуманное не сделать.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ