CSS Flexible Layout Module - flexbox styling

dabblet.css

/**
 * CSS Flexible Layout Module - flexbox styling
 */
 
* { transition: all 2s; }
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
	padding: 1em;
	font-size: 1.4em;
}
header {
	background-color: blue;
	padding: 1em;
}
.wrapper {
	display: flex;
}
aside {
	background-color: orange;
	width: 20%;
	order: 2;
}
.mainContent {
	background-color: white;
	flex:1;
	order: 3;
}
.extraDiv {
	background-color: pink;
	width: 20%;
	order: 1;
}
footer {
	background-color: green;
	width: 100%;
	clear: both;
}
@media all and (max-width: 500px) {
	/* change below 500px */
	.wrapper { flex-flow: column; }
	.mainContent, aside, .extraDiv {
		/* Return them to document order */
		
		order: 0; width: auto;
	}
}

dabblet.html

<header role="banner">here is the header</header>
<div class="wrapper">
	<div class="mainContent">Here is the main content</div>
	<aside role="complementary">here is a sidebar, after the main content (although we want to make it appear before)</aside>
	<div class="extraDiv">Oh Lord, now my head is starting to hurt!</div>
</div>
<footer role="contentInfo">here is the main footer</footer>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}