-
-
Save ChrisBAshton/6053a9ef91d89e29865e to your computer and use it in GitHub Desktop.
/* | |
<div class="results"> | |
<div class="results_top"> | |
<h2>Results</h2> | |
</div> | |
<div class="results_bottom"> | |
<div class="share"></div> | |
</div> | |
</div> | |
*/ | |
.share { | |
dom-position: auto; | |
} | |
@media (min-width: 600px) { | |
.share { | |
dom-position: .results .results_top; | |
} | |
} |
Hmmm... that's pretty nifty, especially the image example in http://dev.w3.org/csswg/css-flexbox/#overview, but looks like it would get quite complex to use for bigger pages.
If you don't know or care how many elements you have, you just know you want X element to move to the top of Y element on certain screen sizes, I think dom-position looks more readable. (And it's just CSS selectors, which we all know, so less of a learning curve!)
Following the rules of progressive enhancement, it's normally easier to position things differently on larger screens when design for mobile devices first. :)
Another possibility is the CSS Grids. But as always, it's not safe to use all of this wonderful new stuff yet because people don't know how to upgrade IE. :P
You can do this anyway with Flexbox. It lets you change the order of things.
http://dev.w3.org/csswg/css-flexbox/#order-property