multiple rows show in carousel in mobile view

I am using the owl carousel in material design bootstrap and I'm new in laravel 5, in fact when it is in desktop view it looks blank after the last image and shows 3 rows in carousel in mobile view. i search but nothing found similar .Why, I did not understand.it looks like this:-

---

This is the mobile view you can see here, a carousel showing three rows

This is the desktop view you can see here, after the last two images the carousel is empty

<div class="loop owl-carousel">
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
  <div class="item">
    <div class="card mb-2 w-responsive">
      <img class="round-top" src="" alt="Card image cap">
      <p class="title-text">Card title</p>
    </div>
  </div>
</div>

---

<script>
 var owl_loop = $('.loop');
    owl_loop.owlCarousel({
        items:4,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true
    });
</script>

via Chebli Mohamed