Bootstrap div alignment issue - css

Question

I'm having issue trying to align my div in Bootstrap 3.
Here's what I am trying to accomplish:
I have worked with pull and push but I guess I'm not good enough with it.
Code:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 col-md-pull-9 purple">
purple
</div>
</div>
</div>
http://jsfiddle.net/bva5z74w/1/

Answer 1

I was watching this to see if anyone would come answer the obvious: don't use bootstrap push and pull for this. Use float right and no floats. Blue must be taller than red at the min-width, other than that I think this will work smoothly.
DEMO: http://jsbin.com/degeju/1/
CSS:
.blue {
background: blue
}
.red {
background: red
}
.orange {
background: orange
}
.green {
background: green
}
.purple {
background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
height: 50px
}
#media (min-width:992px) {
.blue {
height: 600px;
float: right;
}
.red {
height: 300px;
float: none;
}
.orange {
height: 400px;
float: right;
}
.green {
height: 200px;
float: none;
}
.purple {
height: 200px;
float: none;
}
}
HTML
<div class="container">
<div class="row">
<div class="col-md-9 blue">
blue
</div>
<div class="col-md-3 red">
red
</div>
<div class="col-md-9 orange">
orange
</div>
<div class="col-md-3 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>

Answer 2

The HTML you have will work perfectly, just remove the pull on the purple block:
HTML:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>
http://www.bootply.com/dMNG75tSf0
Edit:
The float on the left elements is causing them to collapse to fit their contents. However, with media queries you can set the height to be the same height as the adjacent right element.
#media (max-width:1199px) {
.red {
height: 360px;
}
}
#media (min-width:1200px) {
.red {
height: 300px;
}
}
The obvious drawback is this limits the fix to browsers that support media queries. Therefore, Christina's answer is better, assuming it works consistently across browsers.

Answer 3

div has a display type "block", by default this means that each div will be shown below another div.
this means that someway you've changed some of the css, specifically with floats or display:inline.
if you're not sure how to find and change this you can always make sure each div has width:100%;
that will make sure the div catches the whole width of it's parent container.