title: Difficulty in using grid-system in responsive design
body: <p>I am working on a responsive page use gridview.
  I have a row which contains 3 columns:</p>
  
  <pre><code> &lt;div class="row"&gt;        
      &lt;div class="col-12" &gt;
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
              &lt;img src="..." alt=""&gt;
            &lt;/div&gt;              
            &lt;div class="col-9"&gt;
              &lt;h3&gt;Headline 1&lt;/h3&gt;
              &lt;p&gt;"Lorem ipsum dolor sit amet, ... &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-12" &gt;
        &lt;div class="row"&gt;
          &lt;div class="col-3"&gt;
              &lt;img src="..." alt=""&gt;
            &lt;/div&gt;              
            &lt;div class="col-9"&gt;
              &lt;h3&gt;Headline 2&lt;/h3&gt;
              &lt;p&gt;"Lorem ipsum dolor sit amet, ... &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;   
  
        &lt;div class="col-12" &gt;
          &lt;div class="row"&gt;
            &lt;div class="col-3"&gt;
                &lt;img src="..." alt=""&gt;
              &lt;/div&gt;              
              &lt;div class="col-9"&gt;
                &lt;h3&gt;Headline 3&lt;/h3&gt;
                &lt;p&gt;"Lorem ipsum dolor sit amet, ... &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Each column contains a row, which itself consists of two columns: one for an image, the other one for headline &amp; text. The number of columns inside each row add up to 12. However, the headline &amp; content appear under the image, not next to it.
  Can you figure out the problem?</p>