CSS column re-ordering


.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>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>
    <nav class="nav-wrap">

            <li><a href="#">Home</a>
            <li><a href="#">About Us</a>
            <li><a href="#">Clients</a>
            <li><a href="#">Contact Us</a>
    <aside class="sidebar-wrap">

        <p>I am a rather effortless column of equal height.</p>

Leave a Comment