html - Bootstrap CSS row change in height causes jumping & usability trouble for everything below -

with bootstrap seems challenging deal variable height rows while remaining responsive in css. in case variable number of articles load carousel in sets of 4 or less depending on available in database.

this causes content below jump around articles row height changes.

if use relative positioning, or set height div, may cause css flow error on different screen sizes. example on phones when carousel loads single column of 4, rather 2 columns of 2, height required increase. need sort of min-height in media query css append file, however, couldn't min-height click on div of bootstrap carousel.

<!-- articles -->      <div id="articles" class="padding-bottom padding-top-two">         <div class="container">             <div class="row"> <!-- articles. -->                 <div class="col-lg-12">                     <div class="section-title">                         <h1>articles</h1>                     </div>                                       <div id="articles-carousel" class="carousel slide" data-ride="carousel">                         <ol class="carousel-indicators">                             <li data-target="#articles-carousel" data-slide-to="0" class="active"></li>                             <li data-target="#articles-carousel" data-slide-to="1"></li>                             <li data-target="#articles-carousel" data-slide-to="2"></li>                             <li data-target="#articles-carousel" data-slide-to="3"></li>                                                     </ol>                         <div class="carousel-inner">                          <!-- begin loop -->                             <!-- every 4th post item && row, first 1 active -->                             <div class="item active">                                 <div class="row">  <?php    $stmt = $db->prepare("sql_string"); $stmt->execute(); if ($stmt->bind_result($variables))              {     $divclose = true;     while($stmt->fetch())     {                ((**ommitted variable load section**))          if($m == 4 || $m == 8 || $m == 12 || $m == 16)         {             echo "<div class='item'>";             echo "<div class='row'>";             $divclose = true;         }          echo "<div class='col-sm-6'>\n";         echo "<div class='single-post'>\n";         echo "<div class='pull-left post-image'>\n";          $photo = "page_pics/$picture";          if(!file_exists($photo) || $picture == "")                     $photo = "images/placeholder.png";              if(file_exists($photo))             {                        //$imgsize = getimagesize($photo);                      //$intheight=$imgsize[1];                     //if($intheight > 125)                                           //echo "<div style='height:125px;overflow:hidden'>\n";                      echo "<a href='articles.php?item=$header_url&aid=$id' alt='$header'><img src='$photo' class='img-responsive' style='width:auto;height:10%; float:right;' alt='$header'/></a>\n";                          //echo "</div>\n";                                               } // if pic exists         /*  else             {                 echo "<a href='articles.php?item=$header_url&aid=$id' title='$header' alt=$header><h5 style='width:auto;height:25%; color:#454545;'><font style='color:#454545;'>$header</font></h5></a>\n";                                                             }         } // if pic != ""     }         else         {                 echo "<a href='articles.php?item=$header_url&aid=$id' title='$header' alt=$header><h5 style='width:auto;height:25%; color:#454545;'><font style='color:#454545;'>$header</font></h5></a>\n";                                                         } */           echo "<i class='fa fa-angle-right'></i></a>\n";         echo "</div>\n"; //.div class pull-left          echo "<div class='pull-right post-details'>\n";          echo "<a href='article_read.php?item=$header_url&aid=$id' title='$header, $alt'><h5>$header</h5></a>";          echo "<p style='min-height:15%; max-height:15%'>$content";         //if($category!=$savedcat)         echo "<h5>($category)</h5>\n";         echo "</p>";          echo "</div>\n"; //div class pull-right         echo "</div>\n"; //div class single-post         echo "</div>\n"; //div class col-sm-6           if($m == 3 || $m == 7 || $m == 11 || $m == 15 || $m == 19)         {             echo "</div>"; //item             echo "</div>"; //row             $divclose = false;             //echo "2222\n";                             }       }      if($divclose)     {         echo "</div>"; //item         echo "</div>"; //row                 } }  ?>                           </div><!-- /.carousel-inner -->                     </div> <!-- /.articles-carousel -->                                      </div><!-- /.col-md-10 end of articles -->             </div><!-- /.row -->         </div><!-- /.container -->     </div><!--/#recent-posts articles-->  <!-- end articles → 

make class sets height , width of images coming in. can add class each <li> tag.