如何在移动视图中停止Div的重叠

Question

嗨我有两个div并排 - 但是当我改为移动视图时它们会重叠，我怎么能阻止这个？ Codepen - https://codepen.io/MarkHarrison/pen/NXNGgJ谢谢

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

您可以简单地删除具有绝对位置的.box类，并让bootstrap在小屏幕上重新构建内容：

＆＃13;

＆＃13;

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;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;