Bootstrap - Columns overlap each other

Question

I am trying to achieve the following layout:

I have been able to do this more or less with two issues:

1. The columns overlap with the image
2. The circles are not centered. Moreover when I see this on the mobile, amongst other issues, the two circles stack on top of each other.

Here's my HTML:

<div class="container"> <!-- can't change this -->
  <div class="col-md-8 column"> <!-- can't change this -->
    <!-- can change anything below this -->
    <div class="row">
        <div class="col-md-3">
            <img alt="Some Image" src="http://lorempixel.com/340/340/" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Lorem ipsum dolor sit amet
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="circle">450
                            <br> reviews </div>
                        <div class="circle">4.2 million
                            <br> readers </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
  </div>
</div>

Live Demo

Please help resolve these issues.

Answer 1

I guess you should be using the help of some media queries as well.

Have made some changes to the demo you shared.

Updated Demo

CSS

.circle {
  display: inline-flex;    

  justify-content: center;     
  align-items: center;
  text-align: center;

  margin-right: 10px;
  width: 200px;
  height: 200px;
  font-size: 35px;
  border-radius: 50%;
  color: #fef;
  background: #000
}

.img-left {
  max-width: 100%;
}

.circle-wrapper {
  text-align: center;
}

@media (max-width:500px) {
  .circle-wrapper .circle{
     width: 150px;
    height: 150px;
    font-size: 25px;
  }
}

HTML:

<div class="container"> <!-- can't change this -->
  <div class="col-md-8 column"> <!-- can't change this -->
    <!-- can change anything below this -->
    <div class="row">
        <div class="col-md-3">
            <img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="row circle-wrapper">
                        <div class="circle">450
    <br> reviews </div>
  <div class="circle">4.2 million
    <br> readers </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
  </div>
</div>

Answer 2

It doesn't necessarily overlaps, in this particular case, simply give the image img-responsive class so the width of the image is always at max 100%.

To solve the circle issues, you can put them inside a col-xs-6 so they don't stack on top of each other.

Here is a demo: https://codepen.io/anon/pen/WMEMbW

<div class="container">
   <!-- can't change this -->
   <div class="col-md-8 column">
      <!-- can't change this -->
      <!-- can change anything below this -->
      <div class="row">
         <div class="col-md-3">
            <img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
         </div>
         <div class="col-md-9">
            <div class="row">
               <div class="col-md-12">
                  <p>
                     Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
                  </p>
               </div>
            </div>
            <div class="row">
               <div class="col-md-12">
                  <div class="row">
                     <div class="center-block">
                        <div class="col-xs-6">
                           <div class="circle">450
                              <br> reviews 
                           </div>
                        </div>
                        <div class="col-xs-6">
                           <div class="circle">4.2 million
                              <br> readers 
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <p>
               Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
         </div>
      </div>
   </div>
</div>