Zurb foundation 基础4与轨道定制

是否有任何技术允许您在调整窗口大小时更改列表的结构

这是我的默认标记，以默认分辨率（980px）显示4项：

…
…
…
…

但是我想把它改成只有两个小于768px的分辨率。标记应动态更改为：

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">
  <li>
    <div>…</div>
    <div>…</div>
  </li>
  <li>
    <div>…</div>
    <div>…</div>
  </li>
</ul>

…
…


…
…

我曾尝试通过jQuery展开和打包功能，但是它不起作用，因为基础和轨道已经初始化。

---

你知道我该怎么做吗？

你是在使用这些类吗？小的隐藏，小的显示

<ul>

    <li>
        <div> item 1 </div>
        <div> item 2 </div>
        <div class="hide-for-small"> item 3 </div>
        <div class="hide-for-small"> item 4 </div>
     </li><!-- end slide-1-a-->

    <li class="show-for-small"> 
        <div> item 3 </div>
        <div> item 4 </div>
     </li><!-- end slide-1-b-->

</ul>

项目1
项目2
项目3
项目4


项目3
项目4

您在这里想要实现什么？你的意思是把轨道分成两个轨道吗？还是要在较小的屏幕上隐藏一些幻灯片？把无序的列表一分为二是没有意义的。不，我不想把它们分开。我想在较小的屏幕上显示2而不是4个元素。对不起，如果这个问题把你弄糊涂了。在较大的屏幕上显示4个元素。当触发下一个/上一个时，将显示另一组4。在较小的屏幕上，我希望有2乘2的组，因此滑块将像旋转木马一样工作。

<ul>

    <li>
        <div> item 1 </div>
        <div> item 2 </div>
        <div class="hide-for-small"> item 3 </div>
        <div class="hide-for-small"> item 4 </div>
     </li><!-- end slide-1-a-->

    <li class="show-for-small"> 
        <div> item 3 </div>
        <div> item 4 </div>
     </li><!-- end slide-1-b-->

</ul>