Content overlapping on 480px media query

Question

I'm using bootstrap 3 and I have this grid of... description cards if you will. The thing is that I set a certain height for them in order to not push the columns in an undesireable way due to the content of one being larger than the content of another. It works as expected but the issue comes when the viewport size gets to less than 480px, then the content starts to overlap, as shown in this image (Sorry for it being in Spanish) I tried to change the height to auto in the (max-width: 480px) but that doesn't seem to do the job. Which is weird since it worked for another similar grid I previously made.

Hope the snippet can serve in any way.

Thanks A Lot in advance.

@media (max-width: 480px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  .power_logo {
    height: 50px;
  }
  .second_title {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #7D1424;
  }
  .jumbosubtext {
    margin-top: 50px;
    color: white;
    margin-bottom: 60px;
  }
  .locker {
    height: auto;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: auto;
  }
}
@media (max-width: 767px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    margin-left: 240px;
  }
  .power_logo {
    height: 50px;
  }
  .second_div {
    margin-bottom: 90px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
  }
  .third_text {
    color: #830024;
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
    font-size: 300%;
    margin-top: 100px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    padding-top: 50px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
/*Laptop*/

@media (max-width: 991px) {
  .navbar-toggle .icon-bar {
    width: 35px;
    margin-bottom: 9px;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-default .navbar-toggle:hover .icon-bar {
    background-color: black;
  }
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  .navbar-toggle {
    border: 0px;
    margin-top: 35px;
    margin-right: 30px;
    width: 50px;
    height: 50px;
  }
  .navbar-brand {
    margin-bottom: 10px;
    margin-left: 240px;
  }
  .power_logo {
    height: 50px;
  }
  .navbar-brand {
    padding-top: 0;
    margin: 15px 30px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
    margin-bottom: 20px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
@media (max-width: 1199px) {
  .power_logo {
    width: 150px;
    height: 70px;
  }
  .nav li {
    height: 100px;
  }
  .nav li a {
    line-height: 80px;
    font-size: 18px;
  }
  body {
    margin-top: 100px;
  }
  .jumbotext {
    margin-top: 50px;
  }
  .second_title {
    text-align: center;
    color: #7D1424;
  }
  .logo {
    margin-top: 15px;
    margin-left: 20px;
    max-height: 85px;
    max-width: 200px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    margin-top: 50px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 600px;
  }
}
/* Large desktop */

@media (min-width: 1200px) {
  .power_logo {
    width: 150px;
    height: 70px;
  }
  .nav li {
    height: 100px;
  }
  .nav li a {
    line-height: 80px;
    font-size: 18px;
  }
  body {
    margin-top: 100px;
  }
  .logo {
    margin-top: 5px;
    margin-left: 15px;
    max-height: 90px;
    max-width: 250px;
  }
  .locker {
    height: 300px;
  }
  .featureLocker {
    height: 500px;
  }
  /*-------------------------------------------------------------------------------------------------*/
  .firstSection {
    padding-left: 50px;
    padding-top: 200px;
    background: url("../images/another_bug_wallpaper_by_69efan69%20(1).jpg") center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 700px;
  }
}

<div class="row">
  <div class="col-xs-12">
    <h1 class="third_text center-block">Al escojer Power Exterminators obtiene</h1>
  </div>

  <div class="col-md-6 col-lg-4 ">
    <div class="featureLocker">
      <img src="images/call.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Esmerada atención para usted</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4 ">
    <div class="featureLocker">
      <img src="images/technician.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Equipo técnico altamente capacitado</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4 ">
    <div class="featureLocker">
      <img src="images/tree_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive   center-block">
      <h1 class="features">Productos seguros al medio ambiente</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6  col-lg-4">
    <div class="featureLocker">
      <img src="images/prize_yellow.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Calidad garantizada</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
  <div class="col-md-6 col-md-offset-3 col-lg-4">
    <div class="featureLocker">
      <img src="images/on_time.svg " style="height: 150px; width: 150px;" class="img-responsive center-block">
      <h1 class="features">Puntualidad</h1>
      <h3 class="subFeatures">Possumus aliqua deserunt laborum. Commodo firmissimum do possumus, admodum legam 
                            o offendit praetermissum an ab sunt non quid ex quo sunt vidisse instituendarum.</h3>
    </div>
  </div>
</div>

Answer 1

figured it out, since all i wanted to do was set a specific, unchanging height for the description cards, what I did was instead of adding a <div class="featureLocker"> inside the col-**-* bootstrap divs, I added that class TO the col-**-* bootstrap div, because, by only setting the height it wouldn't affect the horizontal responsiveness of those divs. This SEEMS TO BE the solution for this particular problem if someone is facing a similar issue. Thank you all for your help!