Q:

How to align divs with bootstrap

I have trouble aligning my divs with bootstrap. The big div in the middle is pushing down the boxes at the sides. How can I achieve this layout?
The layout of divs I want to achieve:

A:

I've been working with this code, tell me if it's what you need:
HTML:
<div class="row">
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 medium">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 medium">
        </div>
    </div>      
  </div>
  <div class="col-md-6">
    <div class="row ">  
        <div class="col-md-12 large">
        </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>          
  </div>  
</div>

CSS:
.small{
    height:100px;
    border: 1px solid;
}

.medium{
    height:200px;
    border: 1px solid;
}

.large{
    height:400px;
    border: 1px solid;  
}

Hope it helps!

