Bootstrap push, pull not aligning

I'm trying to achieve a somewhat special design with three blocks. As recomended I started mobile first :

-------------------
|       Title     | 
-------------------
|      Image      |
|                 |
-------------------
|      Text       |
|       ...       |
-------------------

But starting on tablets I want the following to happen:

|-------------------------|
|             |   Title   |
|   Image     |-----------|
|             |           |
|             |   Text    |
|-------------------------|

But instead the following shows:

|-------------------------|
|             |   Title   |
|   Image     |-----------|
|             |           
|             |           
|-------------------------|
              |           |
              |   Text    |
              |-----------|

My code:

<div class="row">
    <div class="text-center col-sm-12 col-md-6 col-md-push-6">
        <h2>Title</h2>
    </div>
    <div class="col-md-6 col-sm-12 col-md-pull-6">
            <img class="img-responsive" src="url" />
    </div>
    <div class="col-md-6 col-sm-12 col-md-push-6">
            <h4>Title of text</h4>
            <p>Wall of text</p>
    </div>
</div>

Thank you!