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

[S_A_N_T_A]

Всем доброго времени суток!

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

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

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

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

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

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

[AlexZaw]

Самый простой вариант, на мой взгляд, это с помощью js вырезать этот блок со всем содержимым  и вставлять его в нужное место.

[ows.nightwolf]

Если не требуется пооддержка старых браузеров (ie9-) то может быть очень удобно использовать css grid ( https://css-tricks.com/snippets/css/complete-guide-grid/ ), там можно задать сетку, и потом в зависимости от разрешения экрана располагать в ней элементы интерфейса в нужные позиции.