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

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

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

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


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

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

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

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

Кто то переизобретает адаптивную верстку.