Сделать owl slider carousel адаптивным под сетку bootstrap

Как достигается адаптивность на старой версии слайдера. У нас есть 5 точек, где мы можем прописать различное количество слайдов:

owl.owlCarousel({
    ...
    items : 2 // по-умолчанию 2
    itemsDesktop:false,
    itemsDesktopSmall:[991,1], // если размер экрана меньше или равно 991 количество слайдов - 1
    itemsTablet:false, 
    itemsMobile:false,  
});

This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window<=1199){ show 4 slides per page}

На новой версии слайдера мы прописываем несколько объектов, названия которых соответствуют минимальной ширине. Объекты содержат переопределенные параметры слайдера, можно переопределить не только количество слайдов, но и, например, включать навигацию и тп.

owl.owlCarousel({
    ...
    responsive:{
        0:{
            items: 1
        }
        991:{
            items: 2
        }
    }
});

Как то так:

    var itm = 2;
    if(window.screen.width <= 991)
    {
     itm = 1;
    }
    owl.owlCarousel({
        navigation : true,
        dots: false,
        slideSpeed : 300,
        paginationSpeed : 400,
        items : itm,
        itemsDesktop : true,
        itemsDesktopSmall : true,
        itemsTablet: true,
        itemsMobile : true,
        navigationText : ["",""],
        responsiveClass:true,
        responsive:{
            991:{
                items: 1
            }
        }
    });

Вот пример из документации. Нажмите на кнопку "выполнить код" и увидите одну колонку. Нажмите на "Развернуть фрагмент" и увидите три колонки.

$(document).ready(function(){ 
  $('.owl-carousel').owlCarousel({ 
    loop:true, 
    margin:10, 
    responsiveClass:true, 
    responsive:{ 
        0:{ 
            items:1, 
            nav:true 
        }, 
        991:{ 
            items:3, 
            nav:true 
        }, 
    } 
}) 
});

.owl-carousel div{ 
    
    background: #4DC7A0; 
   
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> 
 
 
 
<div class="owl-carousel"> 
  <div> Your Content 1 </div> 
  <div> Your Content 2</div> 
  <div> Your Content 3</div> 
  <div> Your Content 3</div> 
  <div> Your Content 4</div> 
  <div> Your Content 5</div> 
  <div> Your Content 6</div> 
</div>