Bootstrap css - div height and overflowing - html

Question

I have a problem with my friend's website which I can't solve. If you could help I'd be very pleased..
And the problem is:
My bootstrap div doesn't hold a height and is going under following div, especially in tablet/phone responsive version. Maybe it will be easier if I give you the address:
http://trido.io/index3.html
and the code I'm talking about is:
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class='col-md-1'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
<div class='col-md-4'>
<div class="row">
<div class='col-md-1'>
</div>
<div class='col-md-9'>
<p align="center">TriDo - Do a chain of three!</p><br>
<p>Arrange your balls in order from 1 to 3:
horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
</div>
</div>
<div class="row">
<ul>
<li>Multiplayer<li>
<li>Endless single-player mode<li>
<li>Game Center leaderboards<li>
<li>Game Center Achievements<li>
</ul>
</div>
</div>
<div class='col-md-1'>
</div>
<div class="col-md-5">
<div class="device-container">
<div class="device-mockup iphone6 portrait black">
<div class="device">
<div class="screen">
<!-- <video width="300" height="534" controls> -->
<video width="270" height="480" controls>
<source src="TrailerDoTel.mp4" type="video/mp4">
<source src="TrailerDoTel.ogg" type="video/ogg">
</video>
<div class="button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-0.5'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
</div>
</section>

Answer 1

This is because your <div class="device-mockup iphone6 portrait black"> is set to position absolute which takes the element out of the flow of the document, so its content will not affect other elements in the DOM.
If you set it to position: relative; it will no longer overlap the div below it.
Or you can give your .device-container a static height, like height: 676px;