Div overlapping issue in bootstrap mobile version - css

Question

I have a carousel, and 2 rows in bootstrap. The layout is fine in standard view but when it goes into mobile queries the page layout becomes messed up. The 2nd row seems to overlap the blue column and i am not sure why.
https://jsfiddle.net/ydcategd/
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>

Answer 1

You should target mobile devices first if you want mobile responsiveness
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-xs-4 one">
<p>123</p>
</div>
<div class="col-xs-4 two">
<p>456</p>
</div>
<div class="col-xs-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
</div>
Based on your updates check this fiddle

Answer 2

Here is your fix:
HTML:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
CSS:
html, body{
height: 100%;
}
.carousel, .item, .active, .carousel-inner{
height: 100%;
}
.item>div{
width: 100%;
height: 100%;
}
.item:nth-child(1) > div {
background-color: yellow;
}
.box{
width: 100%;
height: 100%;
position:absolute;
top:100%;
}
#triple{
height: auto;
}
.col-lg-4 {
height:100%;
}
.one, .two, .three{height: 50vh;}
.one{ background-color:red;}
.two{ background-color:blue;}
.three{ background-color:green;}
.four{ background-color:orange;}
#single{
height:50%;
border:1px solid black;
}
#media (max-width: 767px){
.one, .two, .three{height: 100vh;}
}
Fiddle: https://jsfiddle.net/vsk59tck/1/