如何使用col-md-6（多列）制作自举折叠手风琴

Question

Bootstrap手风琴折叠仅适用于第一栏。我怎样才能使它在第二栏中发挥作用？

HTML （首先，使用Bootstrap手风琴），

<div class="picture-container">
<div class="pic-group-heading">Recreational</div>
 <div class="col-md-6">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel eagle">
    <div class="panel-heading" role="tab" id="headingOne">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        <h4 class="panel-title">
     ICE ARENA AND MORE POWERPOINT PRESENTATION
        </h4>
      </a>
    </div>
    <div id="collapseOnea" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOnea">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel eagle">
    <div class="panel-heading" role="tab" id="headingTwoa">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoa" aria-expanded="false" aria-controls="collapseTwoa">
        <h4 class="panel-title">
          RINK MAGAZINE ARTICLE
        </h4>
      </a>
    </div>
    <div id="collapseTwoa" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoa">
      <div class="panel-body">
        <div class="panel-img">
          <a href="#">
            <figure>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rinkcover.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink1.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink2.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink3.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/image003.jpg" alt="" align="middle"/>
            </figure>
          </a>
        </div>
      </div>
    </div>
  </div>

但是当我添加第二列时，折叠式手风琴效果会停止工作。

HTML （其次，手风琴没有崩溃）

<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel eagle">
    <div class="panel-heading" role="tab" id="headingOne">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOnea" aria-expanded="false" aria-controls="collapseOnea">
        <h4 class="panel-title">
          ICE ARENA AND MORE POWERPOINT PRESENTATION
        </h4>
      </a>
    </div>
    <div id="collapseOnea" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOnea">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel eagle">
    <div class="panel-heading" role="tab" id="headingTwoa">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoa" aria-expanded="false" aria-controls="collapseTwoa">
        <h4 class="panel-title">
          RINK MAGAZINE ARTICLE
        </h4>
      </a>
    </div>
    <div id="collapseTwoa" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoa">
      <div class="panel-body">
        <div class="panel-img">
          <a href="#">
            <figure>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rinkcover.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink1.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink2.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/rink3.jpg" alt="" align="middle"/>
              <img src="http://www.eaglecoatings.net/content/supertherm/projectpictures/RinkMag/image003.jpg" alt="" align="middle"/>
            </figure>
          </a>
        </div>
      </div>
    </div>
  </div>