css:
<style>
.page-wrap {
display: flex;
}
.content-wrap {
/* No flex here, other cols take up remaining space */
order: 2;
width: 60%;
background: #eee;
}
.nav-wrap {
order: 1;
width: 20%; /* For old syntax, otherwise collapses. */
flex: 1;
background: #ddd;
}
.sidebar-wrap {
order: 3;
width: 20%;
flex: 1;
background: #ccc;
}
.content-wrap, .sidebar-wrap, .nav-wrap {
padding: 1em;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
html:
<div class="page-wrap">
<section class="content-wrap">
<h1>Main Content</h1>
<p><strong>I'm first in the source order and second in the template.</strong>
</p>
<p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
<p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
</section>
<nav class="nav-wrap">
<h2>Nav</h2>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About Us</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
<aside class="sidebar-wrap">
<h2>Sidebar</h2>
<p>I am a rather effortless column of equal height.</p>
</aside>
</div>