title: place row at bottom of container
body: <p>been struggling with this layout, mainly trying to find a solution that works cross browser and is responsive.  I am aiming for a layout like so</p>
  
  <p><a href="https://i.stack.imgur.com/1uash.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1uash.jpg" alt="Layout"></a></p>
  
  <p>Essentially, I have a menu at the top which is 120px high.  This is fixed.  I then have the main header section which should have a <code>min-height:100vh;</code>.  Within this, on the left, I have some text which should be vertically aligned within the middle of the section.  I then have an image which should be at the bottom of the section, as well as horizontally in the middle.</p>
  
  <p>I came up with the following structure</p>
  
  <pre><code>&lt;header id="top-area"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="headings"&gt;
                      &lt;h1&gt;Some Title&lt;/h1&gt;
                      &lt;p&gt;Some Text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>So I let both the text and the image take up 4 columns.  This should allow the image to be in the center of the screen.</p>
  
  <p>So, I started the CSS like so</p>
  
  <pre><code>#top-area {
    min-height: 100vh;
    padding-top: 120px; //for the menu
    overflow: hidden;
    background: #ccc;
  }
  </code></pre>
  
  <p>so I set the height, give it a padding to allow for the menu, and then a few additional things.  I have tried so many things to get the rest of the layout in place, trying to keep in mind that it needs to collapse nicely for mobile.  I am now trying flex.</p>
  
  <p>Whatever I try, it seems that I have to actually give it a height (not min-height) of 100vh, which then causes things to be too small on other devices, or I need to give it an absolute position which then takes it out of the flow of the document.</p>
  
  <p>I have provided a <a href="https://jsfiddle.net/z69w9u4g/30/" rel="nofollow noreferrer">JSFiddle</a> to demonstrate where I am at, but it is a bit messy at the moment as I have been trying many different approaches.</p>
  
  <p>What is the best way to achieve this layout, whilst taking into account different browsers and responsiveness?</p>
  
  <p>Any advice greatly appreciated.</p>
  
  <p>Thanks</p>