title: Right call order for Boostrap and JQuery when using collapsibles
body: <p>I am having the weirdest problem and cannot figure it out. I am working with a series of collapsable buttons in bootstrap and everything seems to work fine if I call boostrap before jquery:</p>
  
  <pre><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However, if I call jquery before boostrap (as should be done) then the collapsibles won't close after being opened. I am not sure if I am calling libraries that are incompatible between each other or there might be another issue I am not aware of? The complete <code>&lt;head&gt;</code> tag is:</p>
  
  <pre><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" /&gt;   
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And a sample of the collapsibles:</p>
  
  <pre><code>&lt;div class="container" id="maincontainer"&gt;
      &lt;div class="panel-group"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
                      &lt;a data-toggle="collapse" href="#collapse1"&gt;&lt;center&gt;&lt;b&gt;My Panel&lt;/b&gt;&lt;/center&gt;&lt;/a&gt;
                  &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div id="collapse1" class="panel-collapse collapse"&gt;
                 &lt;ul class="list-group"&gt;                   
                    ### contents
                 &lt;/ul
              &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>