Как изменить последовательность вывода блоков при изменении масштаба страницы?

Question

[Лобстер]

Здравствуйте. Есть вот такая секция(скрин ниже). Как лучше исспользовать список или просто блокам float: left; прописать? Бог с ним с этим выравниванием. У меня другая проблема. Блоки изначально идут:
картинка-1 текст-1 картинка-3
текст-2 картинка-2 текст-3;
Вот я наваял: https://jsfiddle.net/xq9daLy5/

Как сделать так чтобы при уменьшении размера экрана в 2-е колонки было так:
картинка-1 текст-1
картинка-2 текст-2
картинка-3 текст-3

И в одну

картинка-1
текст-1
картинка-2
текст-2
картинка-3
текст-3

Answer 1

[trushka]

Ну, вот если сделать порядок выводе в 2-х строчном виде немного другой
картинка-1 текст-1 картинка-2
текст-3 картинка-3 текст-2;
то можно так: https://jsfiddle.net/trushka/xq9daLy5/1/
Только там надо будет задавать фиксированный размер списку в зависимости от размера экрана, чтоб "правый" элемент не съезжал
upd: исправил немного: https://jsfiddle.net/trushka/xq9daLy5/2/

Comments

[Лобстер]

Спасибо

Answer 2

[iBird Rose]

ну если не хочешь мучиться - у бутстрап есть такая классная штука как pull и push. с ними сможешь реализовать.
itchief.ru/lessons/bootstrap-3/85-bootstrap-3-reor...

Comments

[Лобстер]

А без бустрапа? если я поделю всё по 5 строк(просто это макет не стандартный он не на 12 а на 15 строк) то мне нужно будет тогда убирать промежутки. Чего не хотелось бы

[iBird Rose]

Тостер: оперируйте через position: relative и left и right. тобишь если стоят блоки 1,2 рядом через float: left. то если задать первому right:50%, а второму left: 50% то они поменяются местами. от этого и отталкивайтесь. тока через media не забудьте менять на других экранах как нужно