C O N T E N T C H O R E O G R A P H Y

index.html

<div class="box">
	<div class="header">header</div>
	<div class="nav">nav</div>
	<div class="content">content</div>
	<div class="footer">footer</div>
</div>

style.scss

/*********************

C O N T E N T   C H O R E O G R A P H Y

Something that will reorder your content if used correctly.
And on the right browser, of course.

**********************/

// This is a mixin for making the PARENT box ready.
// Usage:	@include boxed(vertical);
 
@mixin boxed($dir) {
	display:box;
	display:-moz-box;
	display:-webkit-box;
	box-orient:$dir;
	-moz-box-orient:$dir;
	-webkit-box-orient:$dir;
}

// This is the lever ordering part.
// Usage:	@include order(1);

@mixin order($num) {
	box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-webkit-box-ordinal-group: 1;
	box-ordinal-group: #{$num};
	-moz-box-ordinal-group: #{$num};
	-webkit-box-ordinal-group: #{$num};
}

.box {
	@include boxed(vertical);
}

	.header { 	color: red;}
	.nav {		color: yellow;}
	.content {	color: green;}
	.footer {	color: blue;}

@media (min-width: 30em){
	.header { @include order(3); }
	.nav { @include order(3); }
	.content { @include order(2); }
	.footer { @include order(4); }
}

@media (min-width: 50em){
	.header { @include order(1); }
	.nav { @include order(2); }
	.content { @include order(3); }
	.footer { @include order(4); }
}

@media (min-width: 60em){
	.header { @include order(4); }
	.nav { @include order(3); }
	.content { @include order(2); }
	.footer { @include order(1); }
}