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

#html #css #css3

Есть резиновый блок со старой(зачеркнутой) и новой ценой. Как поменять цены местами,
чтобы сначала была новая, а потом старая без правки html, чтобы блоки оставались резиновыми
и по располагались по центру страницы? фидл



.price {
  text-align: center;
  padding: 0 25px;
  display: block;
}
20.170 руб
  19.162 руб




    

Ответы

Ответ 1

Про 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 
      руб
    
  



Ответ 2

.price {
  text-align: center;
  padding: 0 25px;
  display: block;
}

.price {
  direction: rtl;
}

.price > * {
  display: inline-block;
  direction: ltr;
}

  20.170 руб
  19.162 руб



Ответ 3

$("del").each(function(){
    var div = $(this).parent('div');
    div.find('ins').insertBefore($(this))
});


обновил ваш фидл  

Без jquery

   dels = document.getElementsByTagName('del'); 
   for (var i = 0; i < dels.length; i++)
        dels[i].parentNode.insertBefore(dels[i], dels[i].next);


Ответ 4

Если просто средствами css, то можно использовать flex, там revert делается в одну
строку.




.price {
  display: flex;
  align-items: center;
  justify-content: center;
  
  flex-direction: row-reverse; //переставляет блоки в ряд
  //flex-direction: column-reverse; //переставляет блоки в столбик
}
    

  20.170 руб
  19.162 руб