title: Bootstrap grid two columns multiple rows on one column
body: <p>I am trying to replicate the grid as on this page:</p>
  
  <p><a href="https://www.firebase.com/blog/" rel="nofollow">https://www.firebase.com/blog/</a></p>
  
  <p>As you can see there are two main columns (left and right)</p>
  
  <p>The left column contains multiple rows, whereas the right column only one and is vertically aligned to the top.</p>
  
  <p>How do I achieve this with Bootstrap?</p>
  
  <p>I tried the following:</p>
  
  <pre><code>&lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
  
  
                      &lt;!-- LEFT --&gt;
                      &lt;div class="col-md-8 blog-post article"
                          ng-repeat="(key, blogpost) in blog.Posts"&gt;
  
                              &lt;h1 class="text-left"&gt;{{blogpost.title}}&lt;/h1&gt;
                              &lt;p class="small text-left"&gt;{{blog.formatTimestamp(blogpost.date)}} 
                                  &lt;!--
                                  &amp;nbsp;&amp;nbsp;
                                  &lt;span class="text-small"&gt;{{key}}&lt;/span&gt;
                                  --&gt;
                              &lt;/p&gt;
  
                              &lt;div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
  
  
  
                      &lt;!-- RIGHT --&gt;
                      &lt;div class="col-md-4" style="vertical-align: top !important"&gt;
                          Right text
                      &lt;/div&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>