猫头鹰旋转木马移动视图定制

Question

我正在使用“猫头鹰旋转木马”作为我的单页滑块。我总是让它显示两个项目。问题是，在移动视图中，我希望将项目堆叠在另一个下方而不是水平内嵌作为默认设置。你知道我怎么能做到这一点吗？ 这是我的代码：

          <div class="slide slide4">
        <div class="text-item">
          <div class="heading">
            <h1>Power Ups</h1>
            <p>The game offers you two very powerful power ups.</p>
          </div>

          <div id="owl-demo-power" class="owl-carousel">
            <div class="item power1">
              <img src="../assets/images/game/power1.png">
              <p>Use the “Bubble Shield” to protect your next bubble from 2 enemies. The enemies are stunned for few seconds.</p>
            </div>

            <div class="item power2">
              <img src="../assets/images/game/power2.png">
              <p>Use the “Bubble Shield” to protect your next bubble from 2 enemies. The enemies are stunned for few seconds.</p>
            </div>
          </div>
        </div>
      </div>

初始化：

$("#owl-demo-power").owlCarousel({
  autoPlay: 3000, //Set AutoPlay to 3 seconds
  items : 2,
  itemsDesktop : false,
  itemsDesktopSmall : [1200,2],
  itemsTablet: [768,2],
  autoPlay:  false
});

此外，轮播项目的基本CSS：

#owl-demo .owl-item {
    margin: 0 auto;
    text-align: center;
}
#owl-demo .slide4 .item {
    margin: 50px;
    margin-top: 30px;
}
#owl-demo .slide4 .item img {
    display: inline-block;
    float: left;
}