title: with bootstrap, adding position absolute changes width of element
body: <p>I have an unusual responsive layout I need to do in CSS only. I have it all working except that for tablet view (768px - 992px) box <code>A</code> (the red one) has the wrong width. This happens when I apply position absolute, which I am doing in order to take it out of the flow, and allow the rest of the elements to move into place.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.red {
    height: 150px;
    background-color: red;
  }
  .green {
    height: 150px;
    background-color: green;
  }
  .blue {
    height: 150px;
    background-color: blue;
  }
  .yellow {
    height: 150px;
    background-color: yellow;
  }
  @media (min-width: 768px) and (max-width: 992px) {
    /* `.row` added for specificity's sake */
    .row .red {
      position: absolute;
      top: 150px;
      z-index: 1000;
    }
  }
  @media (min-width: 992px){
    .items {
      height: 50px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-3 col-sm-4 col-md-4 red"&gt;A&lt;/div&gt;
      &lt;div class="col-xs-3 col-sm-12 col-md-8 green items"&gt;B&lt;/div&gt;
      &lt;div class="col-xs-3 col-sm-4 col-sm-offset-4 col-md-offset-0 col-md-8 blue items"&gt;C&lt;/div&gt;
      &lt;div class="col-xs-3 col-sm-4 col-md-8 yellow items"&gt;D&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I adjust this so that box <code>A</code> has the same size as <code>C</code> and <code>D</code> on tablet view?</p>
  
  <p>(I am open to completely re-thinking the way the layout is achieved)</p>
  
  <h2>Fiddle: <a href="http://jsfiddle.net/billymoon/e64qLhp1/1/" rel="nofollow">http://jsfiddle.net/billymoon/e64qLhp1/1/</a></h2>