Difficulty in using grid-system in responsive design

Question

I am working on a responsive page use gridview. I have a row which contains 3 columns:

 <div class="row">        
    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 1</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>

    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 2</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>   

      <div class="col-12" >
        <div class="row">
          <div class="col-3">
              <img src="..." alt="">
            </div>              
            <div class="col-9">
              <h3>Headline 3</h3>
              <p>"Lorem ipsum dolor sit amet, ... </p>
            </div>
        </div>
      </div>
  </div>

Each column contains a row, which itself consists of two columns: one for an image, the other one for headline & text. The number of columns inside each row add up to 12. However, the headline & content appear under the image, not next to it. Can you figure out the problem?

Answer 1

I realized I missed the following CSS

.row::after {
  content: "";
  clear: both;
  display: block;
  }

That was why the row was acting weird!

Answer 2

You could start by checking that there aren't elements with padding, margins, or hard-coded widths in col-3 or col-9 which are forcing either of these columns to be wider than intended.

If this were the case, there wouldn't be enough space for the two columns to be displayed side-by-side, and the end result would be that col-9 would drop down, under col-3.

If this doesn't help you identify the issue, as a quick test, change col-9 to say col-6 and see what happens. If still no joy, post a link to the page, or start a codepen with html and css which illustrates the problem.

Good luck!