CSS column re-ordering

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>

Leave a Comment