title: Bootstrap: Why does this column not float and how can I change that?
body: <p>I built a website with bootstrap 3, it has a news section where each news article should look like the following:</p>
  
  <p>mobile-first:</p>
  
  <pre><code>------------
  |  Title   |
  ------------
  ------------
  |  Img     |
  ------------
  ------------
  |  Content |
  |  Content |
  ------------
  </code></pre>
  
  <p>on bigger screens:</p>
  
  <pre><code>---------------------------
  |  Img  |  Title          |
  |       |------------------
  |-------|  Content        |
  |       |  Content        |
  ---------------------------
  </code></pre>
  
  <p>I don't want the content to float around the image, it should stay in its  column, that is why I seek to solve this with bootstrap.</p>
  
  <p>I already asked a question about this - and found a solution -  which I now see is not perfect. <a href="https://stackoverflow.com/questions/29967154/bootstrap-behaviour-similar-to-float-possible">question</a>.</p>
  
  <p>If I use the following code:</p>
  
  <pre><code>&lt;div class="container"&gt; 
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-md-push-4"&gt;Title&lt;/div&gt;         
          &lt;div class="col-md-4 col-md-pull-8"&gt;Img&lt;br&gt;IMg&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;sdf&lt;br&gt;&lt;/div&gt;
          &lt;div class="col-md-4 col-md-push-4"&gt;Content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code>---------------------------
  |  Img  |  Title          |
  |       |------------------
  |-------| 
  |-------|------------------
  |       |  Content        |
  |       |  Content        |
  ---------------------------
  </code></pre>
  
  <p>While the img-columns floats as it should, the content column does not. Why is that?</p>
  
  <p>I added a code snippet for that:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[class*="col"]{
    border: 1px solid black;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  
   &lt;div class="container"&gt; 
    &lt;div class="row"&gt;
     &lt;div class="col-sm-8 col-sm-push-4"&gt;Title&lt;/div&gt;   
     &lt;div class="col-sm-4 col-sm-pull-8"&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;Img&lt;br&gt;&lt;/div&gt;
     &lt;div class="col-sm-4 col-sm-push-4"&gt;Content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>