Как поменять блоки местами без правки html?

Есть резиновый блок со старой(зачеркнутой) и новой ценой. Как поменять цены местами, чтобы сначала была новая, а потом старая без правки html, чтобы блоки оставались резиновыми и по располагались по центру страницы? фидл
.price { text-align: center; padding: 0 25px; display: block; }

20.170 руб 19.162 руб

Ответ

Про FlexBox: на русском и английском
Поддержка FlexBox caniuse.com

1
#order
Применяется к: дочернему элементу / flex-элементу.
По умолчанию flex-элементы располагаются в исходном порядке. Тем не менее, свойство order может управлять порядком их расположения в контейнере.
.price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 0 25px; } .price ins { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .price del { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; }

20.170 руб 19.162 руб

2
*{ box-sizing: border-box; } .price { display: block; padding: 0 25px; } .price ins { float: left; width: 50%; text-align: right; padding: 0 25px; } .price del { float: right; width: 50%; }

20.170 руб 19.162 руб