With bootstrap, adding position absolute changes to element width

Question

With bootstrap, adding position absolute changes to element width

I have a fancy responsive layout that I only need to do in CSS. Everything works for me, except for the tablet window (768px - 992px) A

(red) has the wrong width. This happens when I apply an absolute position, which I do to take it out of the flow and allow the rest of the elements to move into place.

.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 sake */
  .row .red {
    position: absolute;
    top: 150px;
    z-index: 1000;
  }
}
@media (min-width: 992px){
  .items {
    height: 50px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-4 col-md-4 red">A</div>
    <div class="col-xs-3 col-sm-12 col-md-8 green items">B</div>
    <div class="col-xs-3 col-sm-4 col-sm-offset-4 col-md-offset-0 col-md-8 blue items">C</div>
    <div class="col-xs-3 col-sm-4 col-md-8 yellow items">D</div>
  </div>
</div>