/*! sidebar-responsive.css - by Matthew James Taylor
Left Sidebar Responsive 2-Column Layout (Flexbox Version)
https://matthewjamestaylor.com/left-sidebar-layout#flexbox */

/* usage */
/*
<div class="left-sidebar-flexbox">
    <header class="flexbox-header">Header</header>
		
    <div class="flexbox-content">Main content</div>
    <section class="left-sidebar">Left sidebar</section>
		
    <footer class="footer">Footer</footer>
</div>
*/

/* flexbox container */
.left-sidebar-flexbox {
    display:flex;
    flex-wrap:wrap;
}

/* columns (mobile) */
.left-sidebar-flexbox > * {
    width:100%;
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .left-sidebar-flexbox > .header {
        order:-2; /* header first */
    }
    .left-sidebar-flexbox > .left-sidebar {
        /* left sidebar before main content */
        order:-1;
        width:calc(100% / 3);
    }
    .left-sidebar-flexbox > .flexbox-content {
        width:calc(100% / 3 * 2);
    }
}