Create Bootstrap Layout with panel on left and right side
<p>Trying to create this layout:</p>

<p><a href="https://i.stack.imgur.com/E9mbP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E9mbP.png" alt="enter image description here"></a></p>

<p>...but having difficulty with having a panel on the left and right that way. </p>

<p>Hoping someone can help. Here is what I have so far. </p>

<p><a href="https://jsfiddle.net/o1g39soq/" rel="nofollow noreferrer">https://jsfiddle.net/o1g39soq/</a></p>

<pre><code>&lt;div class="row flex-row"&gt;
&lt;div class="panel panel-default flex-col"&gt;
&lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
&lt;div class="panel-body flex-grow" style="height: 20%"&gt;
  &lt;div class="row seven-cols flex-row"&gt;
    &lt;div class="col-md-1"&gt;&lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default no-margin flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default no-margin flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default no-margin flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default no-margin flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default no-margin flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;&lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;

&lt;div class="panel-body flex-grow" style="max-height:30px; background-color: #f5f5f5"&gt;
&lt;/div&gt;

&lt;div class="panel-body flex-grow"&gt;
  &lt;div class="row seven-cols flex-row"&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1"&gt;
      &lt;div class="panel panel-default flex-col"&gt;
        &lt;div class="panel-heading"&gt;Title flex-col&lt;/div&gt;
        &lt;div class="panel-body flex-grow"&gt;Content here -- div with .flex-grow&lt;/div&gt;
        &lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;


&lt;/div&gt;
&lt;div class="panel-footer"&gt;Footer&lt;/div&gt;
</code></pre>

<p></p>

<p>
</p>

<p>Here is the css.</p>

<pre><code>    html,
body {
  height: 100%;
  width: 100%;
}

.container,
.row {
  height: 100%;
  width: 100%;
  margin: 0;
}

.flex-row,
.flex-row &gt; div[class*='col-'] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 0 auto;
  height: 100%;
}

.flex-col {
  display: flex;
  display: -webkit-flex;
  flex: 1;
  flex-flow: column nowrap;
}

.flex-grow {
  display: flex;
  -webkit-flex: 2;
  flex: 2;
}

@media (min-width: 768px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}


/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

.panel-body {
  padding-bottom: 0;
  padding-top: 0;
}

.no-margin {
  margin-bottom: 0;
}
</code></pre>

<p>Please help.</p>