Warning: Parameter 2 to qtranxf_postsFilter() expected to be a reference, value given in /home/.sites/609/site1266/web/blackbams-blog/wp-includes/class-wp-hook.php on line 286 Warning: count(): Parameter must be an array or an object that implements Countable in /home/.sites/609/site1266/web/blackbams-blog/wp-includes/post-template.php on line 284 Responsiveness: Change HTML element order (of e.g. content/sidebars) • responsiveness • Blackbams Blog
26. May 2015
von Blackbam

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

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:

Warning: Use of undefined constant Ext_related_links - assumed 'Ext_related_links' (this will throw an Error in a future version of PHP) in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75

No comments yet

Kommentare abonnieren (RSS) or URL Trackback

Leave a comment: