Как с помощью jquery отсортировать блоки в нужном порядке при изменении размера экрана?

Question

[Super Star]

Здравствуйте. Подскажите как сверстать эту секцию. Блоки изначально идут: картинка-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

[Владимир]

Flexbox order https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[Super Star]

flex-box это хорошо, но не кросбаузрно, а можно как-то с помощью display:table-cell; Выстроить локи так как мне нужно? https://jsfiddle.net/xq9daLy5/3/

[Владимир]

Бред, caniuse.com browserify.org

Answer 2

[Константин Отпущенников]

Используйте Flexbox, в частности свойство order.

Comments

[Super Star]

Придётся судя по всему =( Спасибо за ответ

[Super Star]

а вообще какие еще способы есть? Не подскажите?

[Владимир]

Способы чего? Для таких задач я использую флексбокс. Сортировка нужна если задача вроде такой mlsdev.com/en/blog/73-aligning-blocks-of-different...

[Константин Отпущенников]

Андрей Рысь: я знаю только три:
1) поменять расположение в HTML
2) использовать свойство order из flexbox
3) использовать систему гридов Susy и там выбрать output: isolate, это теряется горизонтальный поток(вертикальный сохраняется) ну и можно будет уже поменять расположение(но только для строки) - лучше не заморачтвайтесь и используйте флексбокс)
4?) Возможно, можно использовать какие-то сложные скрипты, но я в JavaScript не очень силен, и не знаю способа, связанного с ним.

[Super Star]

Константин Отпущенников: Спасибо

[Super Star]

Владимир: всё понятно

Answer 3

[Константин]

Там где flex недоступен, нужно именно javascript'ом.
Например с помощью вот такой штуки vnjs.net/www/project/freewall