Make an element overlap contents below it using Bootstrap

I’ve just started playing with Twitter Bootstrap and I’m trying to make an image in a row overlap the contents below it. How can I accomplish that? I tried giving the contents below a negative margin but that doesn’t seem to work in Chrome dev tools. Here’s a link to what I currently have, but just to summarize:

<div class="container" role="main">
  <div class="row">
    <div class="col-md-1">
  </div>
  <div class="col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/252x136" alt="...">
    </a>
  </div>
  <div class="col-md-8">
  </div>
  </div>
  <div class="jumbotron">
  </div>
</div>

As you can see the <img> pushes the entire jumbotron down. I’d like it to overlap instead until the screen size collapses (responsively) and then the image should no longer overlap in that case.

UPDATE

I ended up combining @JoshC and @Adrian’s solutions for the best of both:

@media (min-width: 992px) {
  #overlap { height: 70px; }
}

solution

You could absolutely position the .col-md-3.img element, and then float the .col-md-8.nav to the right. I added some classes to the elements and then placed the styling in a media query to ensure this doesn’t conflict with any mobile/tablet styling. It seems to work well on all screen sizes.

UPDATED EXAMPLE HERE - FULL SCREEN EXAMPLE

@media (min-width: 992px) {
  .col-md-3.img {
    position: absolute;
    text-align: center;
  }
  .col-md-3.img .thumbnail {
    display:inline-block;
  }
  .col-md-8.nav {
    float: right;
  }
}

Add text-align:center to center the .thumbnail element, which is now also inline-block to fix background-related issues that result from the absolute positioning.