Bootstrap 3 bottom vertically align image and link with link pull-right

Question

I am hoping someone can help me with this one Bootstrap question as I am stumped.

I have been asked to bottom vertically align an image and a link with an image inside of it.

The problem I am facing is they also want the link to have pull-right on the link/image combo, which kills most of the vertical-align classes out there as they rely on float:none, and pull-right requires float:right

Here is my code so far:

<div class="container"> <!-- start of container -->

  <!-- Left side sub-navbar goes here (not important) -->

  <div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->

    <div class="row"> <!-- start of outer-most row -->

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">  

        <div class="row"> <!-- start of title row -->
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
             <hr class="tall">
          </div>
        </div> <!-- end of title row -->

        <div class="row"> <!-- start of image/link row -->

          <!-- left image -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
          </div>

          <!-- link/image combo -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
            <a href="/" target="_blank">
              <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
            </a>
          </div>         

        </div> <!-- end of image/link row -->

      </div> <!-- end of outer-most row -->

    </div> <!-- end of section -->


</div> <!-- end of container -->

And here is a BootPly I made for those that like pretty pictures: http://www.bootply.com/eiEPXErfJx

P.S. Sorry if my bootstrap code is bloated with extra row's and col-*'s, I am still learning it.

Although I accepted that answer, it doesn't work perfectly on mobile devices. The best fix I have found so far is to change the col-* classes on the left image and link/image combo divs as follows:

<!-- left image -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
    <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
</div>

<!-- link/image combo -->
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
    <a href="/" target="_blank">
        <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
    </a>
</div>  

This will force the buttons to be next to each other even when on mobile to make sure the button doesn't overlay the left image and hide the bottom of it

Latest code:

<div class="container"> <!-- start of container -->

  <!-- Left side sub-navbar goes here (not important) -->

  <div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->

    <div class="row"> <!-- start of outer-most row -->

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">  

        <div class="row"> <!-- start of title row -->
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
             <hr class="tall">
          </div>
        </div> <!-- end of title row -->

        <div class="row"> <!-- start of image/link row -->

          <!-- left image -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
          </div>

          <!-- link/image combo -->
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
            <a href="/" target="_blank">
              <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
            </a>
          </div>         

        </div> <!-- end of image/link row -->

      </div> <!-- end of outer-most row -->

    </div> <!-- end of section -->


</div> <!-- end of container -->

Answer 1

Added a class to the div row that contains the context that should be aligned to the bottom:

.row {
      position: relative;
  }

 .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }

html:

<div class="row .... bottom-align-text" ..>

http://www.bootply.com/EbPZrjAw5w

Read also this: https://stackoverflow.com/a/24539629/1165509