Css ZURB基金会，单响应图像行320至480屏幕大小 我刚刚开始探索Zurb基金会，我想知道如果设备屏幕尺寸在320到480 px之间，如何连续显示一个图像。

范例

桌面版 第一行：滑块 第二行：4张图片 第三行：3张图片

第二行和第三行可以是以下矩阵4x6、4x4、4x3和3x6、3x4、3x3中的任意一行

手机版 使用当前代码，它打破了两个图像行的行结构，并显示两个图像，即使对于一个320像素宽的小屏幕

图像图像

图像图像

图像图像

我想要的是，如果屏幕宽度在320-480之间，那么它应该在一行中显示一个图像

图像

图像

图像

图像

图像

图像

图像

我不知道如何在这个基础上实现这个目标，或者我需要改变什么样的属性，我尝试了很少的东西，但是它没有用。 我希望在320-480屏幕上出现类似的情况

Lorem sorum Lorem sorum Lorem sorum Lorem sorum

Lorem sorum Lorem sorum Lorem sorum Lorem sorum

Lorem sorum Lorem sorum Lorem sorum Lorem sorum

您可以尝试以下代码：

---

但它并没有像示例图像中所示那样拉伸图像，这就是我希望它显示的方式给出最大宽度：100%；对于列类

   <div class="row">
          <p>
    <div class="large-4 small-6 columns">   
      <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
    <div class="large-4 small-6 columns">
       <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
    <div class="large-4 small-6 columns">  
       <img src="http://placehold.it/600x400&text=%5Bimg%5D"/>
      <p>Lorem sorum Lorem sorum  Lorem sorum  Lorem sorum </p>
    </div>
          </p>
  </div>

@media all and (max-width: 320px){
 .columns {
    float:none !important;
 }
 .small-6{
    width:100%;

     }
}