css-dom-position.css

/*
<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;
	}
}

Consider the above scenario - on mobile, we want the share section to be toward the bottom of the screen, because we don't have much space to work with and we want the content to come first. On desktop, we want the share section at the top because we have more space to work with and it fits into the design better.

We could achieve this using native CSS, absolute positioning and negative margins and the like, but this seems somewhat hacky and won't necessarily be consistent between different browsers and different viewport sizes. In essence, conceptually we really just want to move the element in the DOM to achieve a presentational goal.

We can do this with JavaScript, but this doesn't really come under 'behaviour' - this is styling; presentation, through and through. It seems neater to keep this in our CSS. I don't want JavaScript to have to worry about how to display my application, just to manipulate the forms and generate the results as it should.

HTML should represent structure, CSS should represent the presentation of that structure, and I know this kind of violates that rule. But I think there are certain individual cases where it could and should be used over current alternatives.

You can do this anyway with Flexbox. It lets you change the order of things.
http://dev.w3.org/csswg/css-flexbox/#order-property

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