CSS Regions Example

css.css

#content {
	-webkit-flow: 'foo';
	-webkit-flow-into: foo;
}

.region {
	background-color: white;
	-webkit-box-sizing: border-box;
	content: -webkit-from-flow('foo');
	-webkit-flow-from: foo;
	margin: 20px 0 20px 0;
	height: auto;
	overflow: hidden;
	padding: 10px 10px 10px 0;
	width: 48%;
	float: left;
}

#region1{
	float: none;
	width: 100%;
	height: 240px;
	margin-top: 0;
}

#region2{
	height: 500px;
	float: right;
	margin-left: 0;
}

#region3{
	height: 500px;
	margin-right: 0;
}

#region4{
	float: none;
	width: 100%;
	height: 2000px;
	overflow: visible;
	margin-bottom: 0px;
}

enhance.js

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
	if (document.webkitGetFlowByName){
		var displayText = '<div id="region1" class="region"></div>'+ 
		'<hr />'+ 
		'<div id="region3" class="region"></div>'+ 
		'<div id="region2" class="region"></div>'+ 
		'<hr />'+ 
		'<div id="region4" class="region"></div>';

		var displayDiv = document.createElement('div');	
		displayDiv.innerHTML = displayText;
		document.querySelector('body').appendChild(displayDiv);
	}
});
</script>

htmlSnippet.html

<article id="content">
     ... Content here ....
</article>

<div id="display">
	<div id="region1" class="region"></div>
	<hr />
	<div id="region3" class="region"></div>
	<div id="region2" class="region"></div>
	<hr />
	<div id="region4" class="region"></div>
</div>