Как с помощью адаптивной верстки менять положение тэгов?

Question

[lohmag]

Есть два состояния макета, как используя media менять порядок html тэгов? Как еще без извращений расположить элементы не знаю. Смотрите, картинка на первом состоянии по-середине блока, на втором состоянии вообще слева от всего. Было бы удобно картинку и текстовую часть разделить на два блока и легко сверстать, но тогда первое состояние хз как делать, т.к. картинка посередине.

Answer 1

[zooks]

Либо через JavaScript, либо через Flex и свойство order.

Comments

[lohmag]

Подскажите по поводу flex и order - я как не пытался не смог придумать как их разметить, потому что опять же если делать flex-direction: row и order картинке , то два текстовых блочка становятся в ряд друг с другом, рядом с картинкой, что понятно ведь блоки должны идти в ряд. И опять же напрашивается объединение их внутри одного блока..

[zooks]

lohmag: согласен, для ПК нужно объединять элементы в правый блок с display: flex. Тогда изменяется порядок для мобильной версии. Пока нет идей как это реализовать на чистом CSS.

Answer 2

[Максим Тимофеев]

getbootstrap.com/css/#grid
foundation.zurb.com/grid.html

Answer 3

[Лариса]

Возможно будет полезно в этой задаче использовать для этого bootstrap

Переопределение колонок