<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#content {display:-webkit-flex; display:flex; flex-flow:row wrap;}
#one {width:23.3%; padding:5%; background:#ccc; -webkit-order:3; order:3;}
#two {width:23.3%; padding:5%; background:#fff; -webkit-order:1; order:1;}
#three {width:23.3%; padding:5%; background:#eee; -webkit-order:2; order:2;}
</style>
</head>
<body>
<article id="content">
<div id="one">
<h1>Div One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
</div>
<div id="two">
<h1>Div Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
</div>
<div id="three">
<h1>Div Three</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies leo ipsum, quis dapibus mi dignissim vitae. Nunc tristique luctus fermentum. Cras vehicula scelerisque libero, eget cursus tortor imperdiet eu. Sed imperdiet semper nibh, ac bibendum velit sodales ut.</p>
</div>
</article>
</body>
</html>
【column】
