Responsive Layout using flexible box model [on dabblet](http://dabblet.com/gist/5569449).

dabblet.css

/**
 * style.css
 */

/*
   this css uses Lea Verou's prefix free, if you port it out of dabblet, add the prefixes!
*/

/* resets */
html, body 
{
	height : 100%;
}

body
{
	margin : 0;
	padding : 0;
}

/* dev aids */
.layout-section
{
	box-sizing : border-box;
	font-family : Courier;
	font-size : 10pt;
}

#showLayoutNamesOption:checked ~ .layout-section:before,
#showLayoutNamesOption:checked ~ * .layout-section:before
{
	content  : "[" attr(id) "]";
	padding : 5px;
}
#showLayoutNamesOption:checked ~ .layout-section:after,
#showLayoutNamesOption:checked ~ * .layout-section:after
{
	content  : "[/" attr(id) "]";
	padding : 5px;
}

#showLayoutNamesOption
{
	position : absolute;
	right : 200px;
	top : 7px;	
}

#showLayoutNamesOption ~ label
{
	position : absolute;
	right : 10px;
	width : 180px;
	top : 7px;	
	font-family : Sans-serif;
	font-size : 10pt;
}


/* layout */
#header 
{
	height : 40px;
	background-color : darkgrey;
}

#main
{
	background-color : lightblue;
	height : calc(100% - 40px - 20px - 4px);	
	display : flex;
	flex-direction: row;
	justify-content : center;
	align-content : center;
}

#nav
{
	width : 300px;
	background-color : royalblue;
	flex-grow : 0;
	
	display : flex;
	flex-direction: column;
	justify-content : center;
	align-content:center;
	
	height :100%;
}

#nav-header
{
	background-color : rgba(255, 255, 255, 0.5);
	flex-grow : 0;
	height : 40px;
}

#nav-body
{
	background-color : rgba(255, 255, 255, 0.2);
	flex-grow : 1;
}

#nav-footer
{
	background-color : rgba(255, 255, 255, 0.7);
	flex-grow : 0;
	height : 20px;
}

#content
{
	flex-grow : 1;
	background-color : darkblue;
	color : #fff;
	min-width : 400px;
}

#burnlist
{
	flex-grow : 0;
	width : 200px;
	background-color : hotpink;
}

#footer
{
	height : 20px;
}

@media all and (max-width: 885px) {
	
	#main 
	{
		flex-direction  : column;
	}
	
	#nav, #content, #burnlist
	{
		height : auto;
		margin-left: auto;
		margin-right : auto;
		width : 80%;
		min-width : auto;
	}

}

dabblet.html

<!-- index.html -->

<input type="checkbox" id="showLayoutNamesOption" checked="true" /><label for="showLayoutNamesOption">Show Layout Section Names</label>

<div id="header" class="layout-section">
</div>
<div id="main" class="layout-section">
	<div id="nav" class="layout-section">
		<div id="nav-header" class="layout-section">
		</div>
		<div id="nav-body" class="layout-section">
		</div>
		<div id="nav-footer" class="layout-section">
		</div>
	</div>
	<div id="content" class="layout-section">
	</div>
	<div id="burnlist" class="layout-section">
	</div>
</div>
<div id="footer" class="layout-section">
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}

Responsive Layout using flexible box model on dabblet. I put in a little checkbox:checked sibling trick :

#showLayoutNamesOption:checked ~ .layout-section:before,
#showLayoutNamesOption:checked ~ * .layout-section:before
{
    content  : "[" attr(id) "]";
    padding : 5px;
}
#showLayoutNamesOption:checked ~ .layout-section:after,
#showLayoutNamesOption:checked ~ * .layout-section:after
{
    content  : "[/" attr(id) "]";
    padding : 5px;
}

to show id's of layout elements to make it a bit clearer - Click the checkbox to toggle :)

tested works on Chrome only... will be adding display : box and others for Safari and FF