How to change order of elements in CSS. Set order of elements in container.

Its a tip for Responsive Web Design. When your desktop view is floated to left and in tablet/phone view you want to change order of elements and float right is not a good solution.


<div class="container">

<div class="el-2"></div>
<div class="el-1"></div>



  display: -webkit-box
  display: -moz-box
  display: box
  -webkit-box-orient: vertical
  -moz-box-orient: vertical
  box-orient: vertical

    -webkit-box-ordinal-group: 1
    -moz-box-ordinal-group: 1
    box-ordinal-group: 1

    -webkit-box-ordinal-group: 2
    -moz-box-ordinal-group: 2
    box-ordinal-group: 2


.container {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
.container .el-1 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
.container .el-2 {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;