26. May 2015
von Blackbam
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/
Share

Dieser Eintrag wurde am 26. May 2015 um 17:17 in der Kategorie CSS, Web Development veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.


Tags:

No comments yet

Kommentare abonnieren (RSS) or URL Trackback

Leave a comment: