title: Columns jumping to next row on small device in Bootstrap
body: <p>I am trying to make a simple layout using Bootstrap 3, and it looks fine on laptop, but when I try to emulate in Chrome for small screen such as Iphone 5, one of my image is going to the next row, though I was expecting it to be at the same row as the heading. Visually, there seems to be enough space, and I tried pulling, pushing, applying offser but could not get it working yet.</p>
  
  <p>Can anybody help point out please what am I doing wrong  here?</p>
  
  <p><img src="https://i.stack.imgur.com/v0PgX.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="col-md-4 column"&gt;&lt;/div&gt;
        &lt;div class="col-md-4 column"&gt;&lt;/div&gt;
        &lt;div class="col-md-4 column"&gt;
          &lt;div class="row clearfix"&gt;
            &lt;div class="col-md-6 column"&gt;
              &lt;img alt="300x200" src="images/loc.png" style="padding-top:15pt;height:auto;max-width:35px" /&gt;
            &lt;/div&gt;
            &lt;div class="col-md-6 column"&gt;
              &lt;h2&gt;Venue 2015&lt;/h2&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>