title: Bootstrap Vertical Align images
body: <p></p>
  
  <pre><code>&lt;div class="container-fluid padding" style="margin-top: 150px; margin-bottom: 75px;"&gt;
  
            &lt;div class="row padding images"&gt;&lt;!--Image 1--&gt;
              &lt;div class="col-xs-12 col-sm-12 col-md-6 col-lg-8"&gt;
                &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 vcenter"&gt;&lt;!--Image 2--&gt;
                &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 vcenter"&gt;&lt;!--Image 3--&gt;
                &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"&gt;&lt;!--Image 4--&gt;
                &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"&gt;&lt;!--Image 5--&gt;
               &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"&gt;&lt;!--Image 6--&gt;
               &lt;img src="https://i.stack.imgur.com/YO4AV.jpg" alt=""&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1></h1>
  
  <p>So image 1 is taking up 8/12 cols and I want image 2 and 3 to vertical align along the right side of image 1 but what happens is that image 2 is on the right side but image 3 ends up below on a new row with image 4-6 are and pushes image 6 down. So what should I do to be able to make image 3 end up under image 2 along /doing vertical align or something like that along side the right side of image 1?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>images{
          width: 80%;
          margin: 0 auto;
        }
        .images img{
          background-color: red;
          float: left;
          margin: 15px 0px;
          width: 100%;
          height: auto;
          border: 1px solid gray;
        }</code></pre>
  </div>
  </div>
  </p>