Javascript 如何仅在移动网格上使用vue awesome swiper组件

我有两个带内容的引导col。在大范围内，科尔斯获得了一半的行，在移动范围内，科尔斯获得了所有行的宽度，并且一个接一个地坐着，就像一个典型的网格。我想在移动秤上使用vue awesome swiper，这样我就可以滑动列，而不是向下滚动到底列。同时，我不需要在大刻度上滑动，因为列适合一行宽度。我怎样才能发财呢？如何仅在移动设备上使用vue awesome swiper组件，而不要在大型设备上使用。 下面是一些代码来说明这种情况：

<div class="row h-100">
   <div class="col gauche">
      <!-- Some content here -->
   </div>
   <div class="col gauche">
      <!-- Some content here -->
    </div>
</div>

使用swiper：

<div class="row h-100">
   <swiper class="swiper">
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
     <swiper-slide>
       <div class="col gauche">
          <!-- Some content here -->
       </div>
     </swiper-slide>
   </swiper>
</div>

---

解决这个问题的简单方法（但不是最漂亮的方法）是使用引导程序来定义滑块何时显示以及列何时显示

此解决方案的缺点是必须定义两次内容。 一次用于普通列，一次用于幻灯片

在下面的示例中，我在

md

断点处进行了“交换”，但您可以根据需要进行更改

Vue.use（VueAwesomeSwiper）
Vue.组件（'列内容'{
模板：“#列内容”，
道具：['text']，
data（）{return{text:'123'}}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
项目：[
{ 
文本：“一些文本1”
},
{ 
文字：“一些文字2”
},
]
}
}
})

{{text}}