Bootstrap columns overlapping on resize

Question

I'm working on some responsive design but I'm having trouble with columns in bootstrap, because everything works perfectly until I resize my browser, I already checked some answers here like: Bootstrap grid columns overlapping each other Why do my bootstrap columns overlap? bootstrap columns overlapping

but none of those work for my problem, I hope you can help me :) this is what I have:

  .lil-price{
      width: 40%;
      margin-top: -15%;
      z-index: 1;
      border-radius: 50%;
      text-align: center;
      font-size: 1.5em;
      padding: 14% 0;
      line-height: 1;
      position: absolute;
      background: #111842;
      color: white;
  }

  .lil-orange{
      width: 72%;
      z-index: 0;
      border-radius: 50%;
      text-align: center;
      font-size: 1.8em;
      padding: 27% 0;
      line-height: 30px;
      position: absolute;
      background: #faa21b;
      color: white;
      margin-left: 19%;
      margin-top: 3%;
    
  }

  .lil-march-1{
   position: absolute;
   margin-top: 50%;
  }

  .lil-march-1 img{
      width: 80%;
      margin-left: 10%;
  }

  .lil-blue{
      width: 72%;
      z-index: 0;
      border-radius: 50%;
      text-align: center;
      font-size: 1.8em;
      padding: 27% 0;
      line-height: 30px;
      position: absolute;
      background: #00aae4;
      color: white;
      margin-left: 19%;
      margin-top: 3%;
    
  }

  .lil-jeep{
   position: absolute;
   margin-top: 50%;
  }

  .lil-jeep img{
      width: 80%;
      margin-left: 10%;
  }


  .lil-green{
      width: 72%;
      z-index: 0;
      border-radius: 50%;
      text-align: center;
      font-size: 1.8em;
      padding: 27% 0;
      line-height: 30px;
      position: absolute;
      background: #4e9d2d;
      color: white;
      margin-left: 13%;
      margin-top: 3%;
    
  }

  .lil-vento{
   position: absolute;
   margin-top: 50%;
  }

  .lil-vento img{
      width: 80%;
      margin-left: 10%;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container lorem">
  <div>
   <center><h2 class="blue-title title-mobil">Lorem</h2></center>
  </div>
   <div class="row">
    <div class="col-sm-4">
    <div>
      <div class="lil-price">consectetur adipiscing</div>
   <div class="lil-blue">
     <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="lil-jeep">
        <img src="http://placekitten.com/900/500">
      </div> 
        </div> 
    </div>
    <div class="col-sm-4">
        <div class="row">
     <div class="lil-price">consectetur adipiscing</div>
   <div class="lil-orange">
     <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="lil-march-1">
        <img src="http://placekitten.com/900/500">
      </div>
        </div>   
    </div>
    <div class="col-sm-4">
     <div class="lil-price">consectetur adipiscing</div>
       <div class="lil-green">
         <p>Lorem ipsum dolor sit amet</p>
        </div>
      <div class="lil-vento">
        <img src="http://placekitten.com/900/500">
      </div> 
    </div>
   </div> 
</div>

https://codepen.io/phacohen/pen/RgPLjP

Answer 1

You have to remove position: absolute property from your classes for it to stop overlapping.

Without position: absolute:

.rect {
  width: 120px;
  height: 120px;
  border: 3px solid;
  font-size: 40px;
}

<div class="row">
  <div class="col-sm-4"><div class="rect">1</div></div>
  <div class="col-sm-4"><div class="rect">2</div></div>
  <div class="col-sm-4"><div class="rect">3</div></div>
</div>

With position: absolute:

.rect {
  width: 120px;
  height: 120px;
  border: 3px solid;
  font-size: 40px;

  position: absolute;
}

<div class="row">
  <div class="col-sm-4"><div class="rect">1</div></div>
  <div class="col-sm-4"><div class="rect">2</div></div>
  <div class="col-sm-4"><div class="rect">3</div></div>
</div>