Can Flexbox do this 2-Column Setup

HTML & CSS
8

I knew this wasn’t as easy as it looks. I see it work with a height like you said, but of course that’s not feasible.

I have no interest in using grid due to browser support at this time.

I can get the desktop view by floating the sidebar blocks, they would have to come first in the html source though. Then I can’t rearrange the order when media queries kick in for mobile.

EDIT:
Here is the code using height and it gives the desktop and mobile views I’m after, but it is useless with height set.
Although I am having trouble keeping the sidebars at a fixed width while main content fills the rest of the space.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2-Col Stack Flex</title>
<style>
html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.wrap {
   width:96%;
   max-width: 1000px;
   margin: 0 auto;
}
header,footer {
   padding: 10px;
   font-weight: bold;
   text-align: center;
}
header {
	background: tomato;
}
footer {
	background: lightgreen;
}

/*====== Flex Rules ======*/
.inner {
   display: flex;
   flex-flow: column wrap;
   font-weight: bold;
   text-align: center;
   height:500px
}
.inner > * {
   padding: 10px;
   font-weight: bold;
}
.main {
   display: flex;
   flex-direction: column;
   order: 3;
   flex: 1 2 0px;
   text-align: left;
   background: deepskyblue;
}
.side-1 {
   display: flex;
   flex-direction: column;
   order: 1;
   flex: 1 0 180px;
   /*width:180px;*/
   background: gold;
}
.side-2 {
   display: flex;
   flex-direction: column;
   order: 2;
   flex: 1 0 180px;
   /*width:180px;*/
   background: hotpink;
}

@media all and (max-width: 600px) {
   .inner {flex-flow: column wrap;}
   .side-1,.side-2 {flex: 0;}
   .main {order: 2;}
   .side-2 {order: 3;}
}


</style>
</head>
<body>
<div class="wrap">
   <header>Header</header>
   <div class="inner">
      <div class="side-1">Side Top</div>
      <div class="main">
         <h2>H2 Content Heading</h2>
         <p>main content text</p>
         <p>main content text</p>
         <p>main content text</p>
         <p>main content text</p>
      </div>
      <div class="side-2">Side Bottom</div>
   </div>
   <footer>Footer</footer>
</div>
</body>
</html>