title: Columns of Different Height in Bootstrap
body: <p>I want to create two columns, one column with 3 boxes of smaller height and the second column with 1 box of larger height. However, when I increased the height of the box in the second column, the last two boxes in the first column gets pushed further down the page. I want the 2 columns to happen side by side. (I want the red and blue boxes below to move up next to the large grey box)</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="row"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;div class="l-board col-xs-12  col-xs-offset-1"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-7"&gt;
                      &lt;div class="dashboard col-xs-12  col-xs-offset-1"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;div class="rel-board col-xs-12  col-xs-offset-1"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-4"&gt;
                      &lt;div class="exp-board col-xs-12  col-xs-offset-1"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.l-board{
      background-color:#F5FCF4;
      margin-bottom: 10%;
  }
  .rel-board{
      background-color:#FAEDED;
      margin-bottom: 10%;
  }
  .exp-board{
      background-color: #F0F5FA;
      margin-bottom: 10%;
  }
  
  .dashboard{
      background-color: #F4F4F4;
  }
  </code></pre>
  
  <p>Current Look:</p>
  
  <p><a href="https://i.stack.imgur.com/tTYwQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTYwQ.png" alt="Current Webpage"></a></p>
  
  <p>Layout that I want:</p>
  
  <p><a href="https://i.stack.imgur.com/cE2iy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cE2iy.png" alt="I want the red and blue boxes below to move up next to the large grey box"></a></p>