Responsiveness: Change HTML element order (of e.g. content/sidebars)

Blackbam — Tue, 26 May 2015 15:30:44 +0000

The following technique is very useful if you have to make existing websites responsive and e.g. want to have two sidebars after the main content without changing the original HTML. You can define the order of the HTML element which have a common parent element by doing the following:

.parent {
  display:-webkit-box;
  display:-moz-box;
  display:box;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  box-orient:vertical
}

.child1 {
    -webkit-box-ordinal-group:2;
    -moz-box-ordinal-group:2;
    box-ordinal-group:2;
}

.child2 {
  -webkit-box-ordinal-group:3;
  -moz-box-ordinal-group:3;
  box-ordinal-group:3;
}

.child3 {
  -webkit-box-ordinal-group:1;
  -moz-box-ordinal-group:1;
  box-ordinal-group:1;
}

Old box model – more info on the new flexbox model: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

responsiveness – Blackbams Blog

Responsiveness: Change HTML element order (of e.g. content/sidebars)