html - Bootstrap 列碰撞

Question

每当我将我的网站调整为 320 x 480 的移动 View 时，我的两个充满文本的栏会相互碰撞并混搭文本。我尝试仅使用“container-clearfix”在没有列的情况下进行操作，但这并没有解决我的问题。

第一张图片显示了网站文本在 320 x 480 分辨率下对于小型手机的显示效果 image 1

这是 JS fiddle :http://jsfiddle.net/52VtD/14124/

#big-image {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
}
.col-md-12 {
  padding-left: 0px;
  padding-right: 0px;
}
#text-four {
  position: absolute;
  overflow: hidden;
  text-align: center;
  bottom: 450px;
  vertical-align: middle;
  left: 20%;
}
#text-four-p {
  position: absolute;
  overflow: auto;
  bottom: 830%;
  left: 15%;
  text-align: center;
}
.US {
  position: absolute;
  overflow: auto;
  bottom: 250%;
  left: 15%;
  text-align: center;
}
.EU {
  position: absolute;
  overflow: auto;
  bottom: 250%;
  right: 15%;
  text-align: center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  #text-four,
  #text-four-p {
    display: none;
  }
}

<div class="row">

  <img src="image/4.jpg" class="img-responsive" id="big-image">


  <div class="col-sm-12">
    <div class="carousel-caption">
      <h3 id="text-four"> HOW TO WATCH SHORTSHD (US) OR SHORTSTV (EUROPE)</h3>
      <p id="text-four-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum lorem. Nullam molestie lectus eros, vel ornare mi</p>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="carousel-caption">
          <div class="US">
            <h2> ShortsHD (US)</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
              Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
              pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6 col-pull-6">
        <div class="carousel-caption">
          <div class="EU">
            <h2> ShortsTV (EU)</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
              Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
              pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

改变媒体查询的位置

@media only screen 
     and (min-device-width : 320px) 
     and (max-device-width : 480px) {
    .US{
      position: relative;
      overflow:auto;
      bottom: 250%;
      left: 15%;
      text-align: center;
     }
     .EU{
     position: relative;
     overflow:auto;
     bottom: 250%;
     right: 15%;
     text-align: center;
     }
     }