Как заставить div быть нижним с помощью бутстрапа

Question

Я использую bootstrap на Codepen.io. У меня есть страница, разделенная на 3 основных div. Средний div имеет 3 изображения и делится на 3 столбца.

Все выглядит нормально на рабочем столе, но как только я изменяю размер окна, нижний div перекрывает третье изображение, а не перемещается на дно.

Есть ли способ заставить bootstrap работать с магией без изменения CSS вручную?

https://codepen.io/oldmanwithbeer/pen/ENzvoY?editors=1000#0

<div class="container-fluid"> 
    <div class="row"> 
    <div id="one" class="col-md-12"> 

     <div id="btn_row" class="row"> 
     <div class="col-md-12 text-center"> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
      <button type="button" class="btn btn-primary">some text</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div id="two" class="col-md-12"> 
     <h2>some text</h2> 
     <div class="row"> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <a href="#" target="_blank"> 
       <img class="img-responsive" src="#" alt="text"></a> 
      <div class="caption">some text</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div id="three" class="col-md-12"><h3>text</h3> 
    </div> 
    </div> 
</div> 

Answer 1

На самом деле для надлежащего реагирующих или мобильных разработчиков просмотреть используется запрос CSS медиа. Если вы посмотрите на блок начальной загрузки, вы увидите демонстрацию. Важно вы использовали с фиксированной высотой в различных элементах, как:

#portfolio { 
    height: 400px; 
} 

Поэтому я рекомендую использовать CSS медиа-запроса в нижней части таблицы стилей или стиля с авто высоты. Как это:

@media only screen and (max-width: 767px) { 
    #portfolio { 
     height: auto; 
    } 
} 

Надеется, что это будет делать магию ...