基础4和轨道定制

Question

有没有什么技巧可以让你在调整窗口大小时改变列表的结构？

这是我的默认标记，它以默认分辨率(980px)显示4个项目：

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

但我想把它改成两个分辨率小于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的解包和包装函数来实现，但是它不起作用，因为foundation和orbit已经被初始化了。

你知道我该怎么做吗？

Answer 1

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