Bootstrap push/pull - Div not aligned properly

Question

So I have this layout in md -

___________________________________________________________________________
|             [1]       |            [2]             |          [3]       |
|                       |                            |                    |
|_______________________|                            |                    |
                        |                            |____________________|
                        |                            |
                        |                            |
                        |____________________________|

In xs and sm, I want the structure to be this way -

______________________________________________________
|             [1]       |            [2]             |
|                       |                            |
|_______________________|                            |
|           [3]         |                            |
|                       |                            |
|_______________________|                            |
                        |____________________________|

But the structure I am getting is -

______________________________________________________
|             [1]       |            [2]             |
|                       |                            |
|_______________________|                            |
                        |                            |
      (Empty  Space)    |                            |
                        |                            |
________________________|____________________________|
|           [3]         |
|                       |
|_______________________|

How do I fix this?

My code goes like this -

<div class = "col-xs-5 col-sm-5 col-md-4"></div>
<div class = "col-xs-7 col-sm-7 col-md-4"></div>
<div class = "col-xs-5 col-sm-5 col-md-4"></div>

Answer 1

In order to have achieve this structure you will need to pull your second div to right for xs,sm and to left for md.bootstrap-pull-left-for-small-devices

This link will help you to do so..

So, html will be

<div class="row">
  <div class = "col-xs-5 col-sm-5 col-md-4"></div>
  <div class = "col-xs-7 col-sm-7 col-md-4 pull-md-left pull-sm-right pull-xs-right"></div>
  <div class = "col-xs-5 col-sm-5 col-md-4"></div>
</div>

and CSS will be

@media (max-width: 767px) {
  .pull-xs-right {
      float: right;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .pull-sm-right {
      float: right;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .pull-md-right {
      float: right;
  }
}