Bootstrap Overflow not aligning properly

I have a page I'm making where where on small screens (ie: phones) I want the image above the text, and on larger screens I want the image to the right of the text.

I'm using offset to pull the image right on larger screens. However, it's not aligning properly on larger screens (smaller screens are just as I would expect). The text on the left doesn't start until after the image on the right. I haven't used the offset feature of bootstrap before and I'm not quite sure what I'm doing wrong...

Here is a screenshot (unwanted gap marked in yellow)

And the code...

<div class="row">

    <div class="col-md-4 col-xs-12 col-md-offset-8">
       <img src="<?php echo $p['main_img_landing']; ?> " class="img-responsive" alt="">   
    </div>

    <div class="col-md-8 col-xs-12">
        <?php echo nl2br($p['desc_landing']); ?>    
    </div>

</div>

Any help appreciated!

Heyho,

what you are doing with col-md-offset-8 is pushing the image to the right with a margin, thus filling the whole line with this column.

The math: 4+8=12

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12 col-sm-push-8">
  Your Picture 
</div>
<div class="col-sm-8 col-xs-12 col-sm-pull-4">
  Your text
</div>

You can solve this via push and pull. So on medium screens your text will show "first" on the left side with ratio 8/4. Then on smaller screens it will go to normal order where the picture is on the top and the text beneath. Hope that helps :)

Oh, for test reasons i put col-sm. Otherwise you cant see the result in the preview :)

Greetings