title: Make an element overlap contents below it using Bootstrap
body: <p>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 <a href="http://www.bootply.com/120416" rel="noreferrer">link</a> to what I currently have, but just to summarize:</p>
  
  <pre><code>&lt;div class="container" role="main"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-1"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;a href="#" class="thumbnail"&gt;
          &lt;img src="http://placehold.it/252x136" alt="..."&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="jumbotron"&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the <code>&lt;img&gt;</code> 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.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I ended up combining @JoshC and @Adrian's solutions for the best of both:</p>
  
  <pre><code>@media (min-width: 992px) {
    #overlap {
      height: 70px;
    }
  }
  </code></pre>