Edit in JSFiddle

.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;
}

<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>