title: Bootstrap Vertically Align Column Content with Mobile Optimization
body: <p>I am working on a mobile optimized website using the latest Bootstrap grid system.  I want two columns next to each other in md and lg but stacked vertically in xs and sm.  For proper layout, I also use float left and right if the order needs to be different when stacked.  Finally, I want to vertically center the content within each column.</p>
  
  <p>Here is my css in addition to bootstrap:</p>
  
  <pre><code>.left {
      float: left;
  }
  .right {
      float: right;
  }
  @media (min-width: 992px) {
      .vertical-container-md {
          position: relative;
      }
      .vertical-center-md {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
      }
      .right.vertical-center-md {
          left: 50%;
      }
  }
  </code></pre>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;section class="container"&gt;
      &lt;div class="row vertical-container-md"&gt;
          &lt;div class="col-xs-12 col-sm-12 col-md-6 left vertical-center-md"&gt;
              &lt;h1&gt;Little Content&lt;/h1&gt;
              &lt;p&gt;1234567890&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-12 col-sm-12 col-md-6 right"&gt;
              &lt;h1&gt;Lots of Content&lt;/h1&gt;
              &lt;p&gt;abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz&lt;/p&gt;
              &lt;h2&gt;Sub Title&lt;/h2&gt;
              &lt;input type="submit" value="Button" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>If the column tagged as vertical-center-md is always the smallest, this works great.  However, I have some cases where one column has a responsive image which can be larger or smaller.  So to fix that I just add vertical-center-md to both columns.  Should work right?  Nope.</p>
  
  <p>When both columns use this implementation of vertical centering, the row div loses its auto-height and the column divs are transformed to 50% above the row.</p>
  
  <p>Question: How can I implement vertical centering of responsive column content using the bootstrap grid system?</p>