title: Have a bootstrap row fill the screen height, but adjust dynamicly on resizing the window
body: <p>UPDATE: The css style:</p>
  
  <pre><code>height: 100vh;
  </code></pre>
  
  <p>was causing the initial problem below. I was using this so that a specific section of the webpage filled the screen when a 'page-jump' button was clicked. Is there another way to have the section(<code>div class="row"</code>)fill the screen, but it was adjust to contain all the content when the window is resized smaller? When using the above style, it fits the screen perfectly but on window resizing, the height stays at 100vh, but the content within the row is adjusted to stack vertically, so it ovefrlows the row height. </p>
  
  <p>INITIAL PROBLEM: </p>
  
  <p>I am trying to use flexbox style in CSS/Bootstrap to vertically align the content within 3 columns, that are within a row. </p>
  
  <p>Here is a js fiddle with the issue: <a href="http://jsfiddle.net/coopwatts/fnh4exxs/" rel="nofollow">http://jsfiddle.net/coopwatts/fnh4exxs/</a></p>
  
  <p>The HTML is something like this: </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-4 col-md-4"&gt;
      &lt;img&gt;&lt;/img&gt;
      &lt;h2&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-4 col-md-4"&gt;
      &lt;img&gt;&lt;/img&gt;
      &lt;h2&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-4 col-md-4"&gt;
      &lt;img&gt;&lt;/img&gt;
      &lt;h2&gt;&lt;/h2&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS for flexbox is something like: </p>
  
  <pre><code>.row {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </code></pre>
  
  <p>Flexbox works fine for aligning the content but when the window is minimized down to say xs, the content escapes the row and is jumbled all over the place. I'm trying to utilize bootstraps grid system so things look nicely on mobile and laptops so this is an issue. What am I doing wrong?</p>