<div class="wrap">
   <header>
      <h1>Flexbox with <code>display:contents;</code></h1>
   </header>
   <div class="inner">
      <div class="sidebar">
         <div class="top">
            <p>Side Top <br> Nav &amp; Toggle Menu</p>
         </div>
         <div class="mid">
            <p>Side Middle</p>
         </div>
         <div class="bot">
            <p>Side Bottom</p>
         </div>
      </div>
      <div class="main">
         <h2>Main Content</h2>
         <p>The sidebar div on the left has a black border around it.</p>
         <p>When the media query kicks in, <code>display:contents;</code> will remove the sidebar div and allow it's child elements to remain in place.</p>
         <p>The child elements will then become siblings with this main content div. Then we can use flexbox to change the display order of the siblings.</p>
         <p>At this time (2018-03-15), <code>display:contents;</code> is working in Firefox and Chrome.</p>
         <p>main content text</p>
         <p>main content text</p>
      </div>
   </div>
   <footer>Footer</footer>
</div>

html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.wrap {
   max-width: 1000px;
   margin: 0 auto;
}
header,footer {
   padding: 10px;
   font-weight: bold;
   text-align: center;
}
header {
	background: tomato;
}
h1 {margin:0;padding:.5em;font-size:1.6em;}
p code {font-size:1.2em}
footer {
	background: lightgreen;
}

/*====== Flex Layout Rules ======*/
.inner {
   display: flex;
   flex-flow: row nowrap;
}
.main {
   display: flex;
   flex-flow: column wrap;
   flex: 1 1 100%;
   order: 2;
   padding: 10px;
   background: #ddd;
}
.sidebar {
   display: flex;
   flex-flow: column wrap;
   justify-content: space-between;
   flex: 0 0 200px;
   order: 1;
   background: #ccc;
   border: 1px solid #000;
}
.sidebar div {padding: 10px;}
   .top {
      background: gold;
   }
   .mid {
      background: orange;
   }
   .bot {
      background: hotpink;
   }

@media all and (max-width: 650px) {
   .inner {
      flex-flow: column wrap;
   }
   .inner div {padding: 10px;}
   .sidebar, .main {
      flex: 1 0 auto; /*IE-11 needs auto - chokes on 100%*/
   }
   .sidebar {
      display: contents; /*firefox & chrome*/
   }
   .main {order:2;}
   .top {order:1;}
   .mid {order:3;}
   .bot {order:4;}
}