Html 如何在ZURB基础上单行四幅图像显示行宽960px

我是zurb fooundation的新手，工作中遇到了一个问题，当屏幕大小为960px时，要让四幅图像在一行中显示

对于桌面版本，我已将行宽设置为960px

我想4图像显示屏幕大小在768px-960px之间

当屏幕大小在320px-769px之间时，我想显示两个图像

<div class="row">

        <div class="large-3 small-6 columns">   
          <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
        </div>

        <div class="large-3 small-6 columns">
           <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">  
           <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

        </div>
        <div class="large-3 small-6 columns">    
           <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>

        </div>

只需添加

medium-3

Thanksm但是

medium-3

在这里有什么不同呢。@KnowledgeSeek小断点将向上传播，直到它被更高的断点覆盖。因此，如果您使用的是，比如说，

class=“small-6 columns”

它基本上与您使用的

class=“small-6 medium-6 large-6 columns”

<div class="small-6 medium-3 large-3 columns">   
  <img src="http://placehold.it/480x600&text=[img 1]"/> <p></p>
</div>

<div class="small-6 medium-3 large-3 columns">
   <img src="http://placehold.it/480x600&text=[img 2]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">  
   <img src="http://placehold.it/480x600&text=[img 3]"/> <p></p>

</div>
<div class="small-6 medium-3 large-3 columns">    
   <img src="http://placehold.it/480x600&text=[img 4]"/> <p></p>     
</div>