Javascript 使并排图像移动到移动设备上的垂直图像

我有一个div，它有4个并排的图像，图像上还有一些文本。我不想在移动设备上缩小图像和文本，而是希望将图像堆叠在彼此的顶部。然而，当我尝试这样做的时候，我被卡住了

我玩的风格，从来没有能够做到这一点

我用一些测试图像创建了这个jsfiddle（），但是，只显示了一个图像。这在我的网站上不是问题。此外，我还粘贴了下面的样式

谢谢你的帮助

#highlights {
width: 100%;
max-height: 200px;
background: rgba(0, 0, 0, 0.89);
overflow: hidden;
position: absolute;
bottom: 200px;
}
#featured-boxes-light {
width: 100%;
max-height: 200px;
background: rgba(255, 255, 255, 0.03)
}
#highlights .swiper-slide {
position: relative;
cursor: pointer; 
}
#highlights .title-top, #featured-boxes .title-bottom {
background: rgba(0, 0, 0, 0.48);
width: 100%;
position: absolute;
padding: 10px 20px 10px;
color: white;
font-size: 22px;
text-align: left;
/* margin-top: -36px; */
left: 0%;
/* margin-left: -35%; */
line-height: 22px;
bottom: 0px;
height: auto;
z-index: 1;
}
.swiper-wrapper {
max-height: 200px;
}
.fb-header {
display: block;
font-size: 16px;
color: rgb(255, 0, 0);
font-weight: 600;
letter-spacing: 2px;
text-shadow: 0px 0px 3px black;
opacity: .9;
width: 25%;
}
.fb-title .title-top:hover {
opacity: .8 !important;
}
.fb-zoom {
max-width: 350px;
width: 100%;
height: 200px;
overflow: hidden;
}
.fb-zoom img {
max-width: 350px;
width: 100%;
height: auto;
}
.fb-swipe-left, .fb-swipe-right {
height: 195px;
width: 40px;
position: absolute;
top: 0px;
z-index: 999;
background-size: contain !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.fb-swipe-left:hover, .fb-swipe-right:hover {
background-color: rgba(255, 255, 255, 0.33);
}
.fb-swipe-left {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25);
left: -40px;
}
.fb-swipe-left.fb-hovered {
left: 0;
}
.fb-swipe-right {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25);
right: -40px;
}
.fb-swipe-right.fb-hovered {
right: 0;
}
.swiper-scrollbar {
height: 5px;
position: absolute !important;
width: 100%;
bottom: 0px;
margin: 0 auto;
z-index: 999;
background: rgba(255, 255, 255, 0.14) !important;
}
.swiper-scrollbar-drag {
 background: rgba(255, 255, 255, 0.7) !important;

}

添加此媒体查询（宽度根据您的要求进行调整）：

在低于600px宽度的屏幕上，它将图像及其容器的宽度设置为100%。

高度：自动是可选的-不知道您是否需要它。

添加此媒体查询（宽度根据您的要求进行调整）：

在低于600px宽度的屏幕上，它将图像及其容器的宽度设置为100%。
高度：自动
是可选的-不知道您是否需要它。
正如@Johannes所说，您可以添加一个具有特定行为的媒体查询以获得所需的结果

他的查询很好，我刚刚更正了上一张图片的HTML结构：

  <div class="swiper-slide">
    <a class="fb-title" href="">
      <div class="title-top">
        test                  </div>
      <div class="fb-zoom">
        <img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />                     
      </div>
    </a><!--/.swiper-wrapper -->
  </div><!--/#swiper-featured -->



正如@Johannes所说，您可以添加具有特定行为的媒体查询，以获得所需的结果

他的查询很好，我刚刚更正了上一张图片的HTML结构：

  <div class="swiper-slide">
    <a class="fb-title" href="">
      <div class="title-top">
        test                  </div>
      <div class="fb-zoom">
        <img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />                     
      </div>
    </a><!--/.swiper-wrapper -->
  </div><!--/#swiper-featured -->