Javascript 数据均衡器在无行列上不工作

我正在尝试设计一个与不同显示大小兼容的页面，我有6个元素要使用，我想在大到横向设备的每行上显示3个元素，在中型设备上每行显示2个元素，在小型设备上每行显示1个元素。我已采用以下结构完成此操作：

<div class="row" data-equalizer>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>
    <div class="small-12 medium-6 large-4 columns" data-equalizer-watch>
       <!-- content goes here -->
    </div>    
</div>   

到目前为止，至少在逻辑上，问题是当你在某个元素上有一个非常小的文本时，假设你在第三个元素上有一个非常短的文本，在其他元素上有50-100个字符。在这种情况下，大屏幕上发生的情况是，第4和第6个元素被放置在第3个元素之下，数据均衡器停止工作。第五个元素位于第一个元素下方，第二个元素下方有一个空格

---

正如你所看到的，我只使用了一行，这样内容就可以根据屏幕大小重新排列，但是这对我不起作用，我做错了什么？

在ZURB论坛上找到了答案，下面是我被告知要做的：

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>
    <li>
       <!-- content goes here -->
    </li>    
</ul>

链接到答案：

链接到文档：