zurb基礎，具有連續響應圖像，適用於320-480屏幕尺寸

Question

我剛剛開始探索zurb基礎，並且我想知道如果設備屏幕尺寸在320-480像素之間時如何連續顯示一個圖像。

示例http://jsfiddle.net/8ww2v/

桌面版本第一行：滑塊第二行：4張圖像第三行：3張圖像

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

移動版本使用當前代碼，即使在320px寬的小屏幕上，它也可以打破兩行圖像的行格式，並顯示兩個圖像。

image image

image image

image image

我想要的是，如果屏幕寬度在320-480之間，那么它應該連續顯示1張圖像

image

image

image

image

image

image

image

我不確定如何在基礎上實現此目標，或者我需要更改哪些屬性，我嘗試了幾件事，但沒有成功

我希望這樣的想法在320-480屏幕上發生

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

Answer 1

您可以嘗試以下代碼：

工作演示

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

     }
}