每一张幻灯片有两个元素的响应式自助旋转木马

我一直试图让我的旋转木马响应没有结果。我在每张幻灯片上显示两个项目(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
});

你知道如何实现责任行为吗?已经找到了几个选择,但似乎没有什么对我有用。