title: Bootstrap Align Image with text
body: <p>I am trying to align an image on the left side with text using boostrap, and when page is viewed on mobile devices the images becomes centred on top of the text !</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;h1&gt;About Me&lt;/h1&gt;
      &lt;/class&gt;
       &lt;div class="col-md-4"&gt;
       &lt;div class="imgAbt"&gt;
          &lt;img  width="220" height="220" src="img/me.jpg"&gt;
       &lt;/div&gt;
       &lt;/div&gt;
      &lt;div class="col-md-8"&gt;&lt;p&gt;Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have also tried <code>.col-md-3 .col-md-pull-9</code> along with <code>.col-md-9 .col-md-push-3</code> , however I still was not able to achieve desired results, <a href="http://i.stack.imgur.com/e0Lu2.jpg">similar to this design</a></p>