How to stop Div's overlapping in mobile view - html

Question

Hi I have two divs side by side - but when I change to mobile view they overlap, how can I stop this? Codepen - https://codepen.io/MarkHarrison/pen/NXNGgJ Thanks
box {
position: absolute !important;
left: 0;}
iframe{
border:10px solid transparent;
border-image-source:url(https://i.imgur.com/91tJ1qi.png);
border-image-slice:10;
width:500px;
height:300px;
display:block;
margin:auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;

Answer 1

You may simply remove the .box class where there is the absolute position and let bootstrap restruct the content on small screens :
h1,
h2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
padding-bottom: 100px;
}
body {
background: #2B2B2B;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #F5D5D5, 0 0 10px #F2A7A7, 0 0 20px #F58484, 0 0 40px #FC5858, 0 0 80px #FF0F0F, 0 0 90px #F5D5D5, 0 0 100px #F2A7A7, 0 0 150px #F58484;
}
iframe {
border: 10px solid transparent;
border-image-source: url(https://i.imgur.com/91tJ1qi.png);
border-image-slice: 10;
width: 500px;
height: 300px;
display: block;
margin: auto;
}
.box {
position: relative;
margin: 0px;
display: block;
width: 600px;
height: 420px;
margin-top: 15%;
}
.face {
position: absolute;
height: 70%;
width: 40%;
left: 30%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
}
.face-copy {
position: absolute;
height: 100%;
width: 100%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 80% 80% 40% 40%;
z-index: 2;
}
.ear-left {
position: absolute;
width: 15%;
height: 20%;
left: 5%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(-60deg);
z-index: 1;
}
.ear-right {
position: absolute;
width: 15%;
height: 20%;
left: 80%;
background: #CD853F;
border-radius: 50% 50% 50% 50% / 50% 50% 90% 90%;
transform: rotate(60deg);
z-index: 1;
}
.ear-inner {
bottom: 20%;
margin-top: 30%;
background: #8B4513;
width: 35%;
height: 80%;
margin-left: 32%;
border-radius: 70% 70%;
}
.eye-left {
position: absolute;
background: white;
width: 15%;
height: 13%;
left: 30%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-right {
background: white;
width: 15%;
height: 13%;
position: absolute;
left: 55%;
top: 30%;
z-index: 2;
border-radius: 50%;
}
.eye-left-inner,
.eye-right-inner {
background: black;
width: 70%;
height: 70%;
border-radius: 50%;
margin-top: 25%;
z-index: 3;
}
.eye-left-inner {
margin-left: 20%;
}
.eye-right-inner {
margin-left: 10%;
}
.pupil {
position: absolute;
background: white;
width: 30%;
height: 30%;
z-index: 4;
border-radius: 50%;
left: 35%;
}
.nose {
position: absolute;
background: #603311;
width: 50%;
height: 30%;
border-radius: 50%;
margin-left: 25%;
z-index: 4;
margin-top: 65%;
}
.inner-nose {
position: absolute;
width: 85%;
margin-top: 1%;
height: 90%;
background: #8B4513;
border-radius: 50%;
border-top-right-radius: 45%;
transform: rotate(-10deg)
}
.horn-left,
.horn-right {
position: absolute;
margin-left: 15%;
margin-top: -80%;
width: 10%;
height: 80%;
background: #8B4513;
transform: rotate(-20deg);
border-radius: 70% 70% 50% 50% / 50% 50% 50% 50%;
}
.horn-left-bottom,
.horn-left-top,
.horn-left-middle,
.horn-right-bottom,
.horn-right-middle,
.horn-right-top {
background: #8B4513;
position: absolute;
width: 90%;
height: 35%;
transform: rotate(60deg);
margin-top: 500%;
margin-left: 108%;
border-radius: 0.5em 2em 0.5em 2em;
}
.horn-left-top {
margin-top: 20%;
}
.horn-left-middle {
transform: rotate(-60deg);
margin-top: 250%;
margin-left: -110%;
}
.horn-right {
margin-left: 75%;
transform: rotate(21deg);
}
.horn-right-bottom,
.horn-right-top {
background: #8B4513;
transform: rotate(-60deg);
margin-left: -110%;
border-radius: 2em 0.5em 0.5em 2em;
}
.horn-right-top {
margin-top: 20%;
}
.horn-right-middle {
margin-top: 250%;
}
.box {
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
50% {
top: 50px;
}
75% {
top: 150px
}
100% {
top: 0px;
}
}
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<h1 class="neon">Welcome to TLW Christmas Countdown</h1>
<h2 class="neon">You Will be taken to your deal shortly!</h2>
</div>
<div class="row">
<div class="col-md-4 blue">
<!--Reindeer-->
<div class="box">
<!--Head -->
<div class="face">
<div class="face-copy"></div>
<div class="ear-left">
<div class="ear-inner"></div>
</div>
<div class="ear-right">
<div class="ear-inner"></div>
</div>
<div class="eye-left">
<div class="eye-left-inner">
<div class="pupil"></div>
</div>
</div>
<div class="eye-right">
<div class="eye-right-inner">
<div class="pupil"></div>
</div>
</div>
<div class="nose">
<div class="inner-nose"></div>
</div>
<div class="horn-left">
<div class="horn-left-bottom"></div>
<div class="horn-left-middle"></div>
<div class="horn-left-top"></div>
</div>
<div class="horn-right">
<div class="horn-right-bottom"></div>
<div class="horn-right-middle"></div>
<div class="horn-right-top"></div>
</div>
<!-- Closing Face -->
</div>
<!-- Closing Box -->
</div>
</div>
<div class="col-md-4 yellow">
<!--Youtube-->
<div class="video" ;>
<iframe width="540" height="285" src="https://www.youtube.com/embed/iDNWwxJonII" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>