如何使用fullpage.js在移动设备上从3张幻灯片中制作9张幻灯片？

Question

我用FullPage.js设计了整个网站，完成工作后，我需要使它响应。因此，问题出在幻灯片的部分，每个幻灯片上有3个带有3个元素的幻灯片。现在，我需要在没有复制代码的情况下从每个元素制作一张幻灯片。看起来像这样：

桌面-> https://imgur.com/fpz1bhf

我在手机上需要什么-> https://imgur.com/a/YYWv3Ml

我尝试将类添加到每个元素，然后在移动设备上显示它并隐藏桌面类。但这不起作用。

<div class="slide fp-auto-height" data-anchor="slide1">
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

.box {
  background: white;
  width: 250px;
  height: 400px;
  display: inline-block;
  position: relative;
  margin: 40px;
  cursor: pointer;
}

简而言之，我想在计算机上的每张幻灯片上显示3个元素，在移动设备上的每张幻灯片上显示1个元素。我的意思是在移动设备上，每个元素都必须适应设备的视口，而不是通过滚动显示。