Отзывчивая Карусель Bootstrap с двумя элементами на слайде

Question

Я пытался сделать мою Карусель отзывчивой без результатов. Я показываю два элемента (структуры div) на слайде и хочу показать только один элемент для мобильных разрешений.

Это мой HTML:

<div id="recentReleases" class="carousel slide carouselRecentReleases" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="layout-row">
        <!-- Comunicat 1 --> 
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeLightBlue">Corporatiu</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">1. Connexió a internet per a tothom a tota la flota de busos de TMB</p>
              </div>
              <div class="release__footer">
                <span class="release__footer-attachedFiles">2 adjunts</span>
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
        <!-- Comunicat 2 -->
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeRed">Canvis de Personals</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">2. Noves incorporacions en el departament de recursos humans</p>
              </div>
              <div class="release__footer">
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>
          </div>
      </div>                                                                 
    </div>
    <div class="carousel-item">
      <div class="layout-row">
        <!-- Comunicat 3 -->
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeRed">Canvis de Personals</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">3. Noves incorporacions en el departament de recursos humans</p>
              </div>
              <div class="release__footer">
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
        <!-- Comunicat 4 --> 
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeLightBlue">Corporatiu</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">4.Connexió a internet per a tothom a tota la flota de busos de TMB</p>
              </div>
              <div class="release__footer">
                <span class="release__footer-attachedFiles">2 adjunts</span>
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
      </div>                                    
    </div>
    <div class="carousel-item">
      <div class="layout-row">
        <!-- Comunicat 5 --> 
        <div class="layout-6-cols">
          <div class="release">
            <div class="release__header">
              <span class="release__header-date">02 Octubre 2017</span>
              <span class="tag-badge badgeLightBlue">Corporatiu</span>
            </div>
            <div class="release__body">
              <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
              <p class="release__body--text">5.Connexió a internet per a tothom a tota la flota de busos de TMB</p>
            </div>
            <div class="release__footer">
              <span class="release__footer-attachedFiles">2 adjunts</span>
              <a href="#" class="release__footer-link">Llegir més</a>
            </div>
          </div>
        </div>
        <!-- Comunicat 6 -->
        <div class="layout-6-cols">
          <div class="release">
            <div class="release__header">
              <span class="release__header-date">02 Octubre 2017</span>
              <span class="tag-badge badgeRed">Canvis de Personals</span>
            </div>
            <div class="release__body">
              <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
              <p class="release__body--text">6. Noves incorporacions en el departament de recursos humans</p>
            </div>
            <div class="release__footer">
              <a href="#" class="release__footer-link">Llegir més</a>
            </div>
          </div>  
        </div>
      </div>                                
    </div>                                                                                                                                                  
  </div>
</div>

И мне просто нужно, чтобы карусель работала как карусель по умолчанию для начальной загрузки:

$("#carouselRecentReleases").carousel({
  interval: 5000
});

Есть идеи, как добиться решительного поведения? Я нашел пару вариантов, но мне кажется, что ничего не работает.