diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 84227f5557a41cbbd47319633b5b0718ec80ccc2..898a49d9a9f9e4be8f90a89552de01e0ea469925 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -76,46 +76,7 @@ $(function(){
     }
   }
 
-  // javascript build logic
-
-  var inputs = $("#javascript input")
-
-  // toggle all plugin checkboxes
-  $('#selectAll').on('click', function (e) {
-    e.preventDefault()
-    inputs.attr('checked', !inputs.is(':checked'))
-  })
-
-  // handle build button dropdown
-  var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () {
-    buildTypes.removeClass('active')
-    $(this).addClass('active')
-  })
-
-  // request built javascript
-  $('#javascriptBuild').on('click', function () {
-
-    var names = $("#javascript input:checked")
-      .map(function () { return this.value })
-      .toArray()
-
-    if (names[names.length - 1] == 'bootstrap-transition.js') {
-      names.unshift(names.pop())
-    }
-
-    $.ajax({
-      type: 'POST'
-    , dataType: 'jsonpi'
-    , params: {
-        branch: '2.0-wip'
-      , dir: 'js'
-      , filenames: names
-      , compress: buildTypes.first().hasClass('active')
-      }
-    , url: "http://bootstrap.herokuapp.com"
-    })
-  })
-
+ 
   // fix sub nav playa
   var $win = $(window)
     , $nav = $('.subnav')
@@ -201,4 +162,50 @@ $(function () {
       }
     }
   })
-}(jQuery);
\ No newline at end of file
+}(jQuery);
+
+ // javascript build logic
+
+$(function () {
+
+  var inputsComponent = $("#components.download input")
+    , inputsPlugin = $("#plugins.download input")
+
+  // toggle all plugin checkboxes
+  $('#components.download .toggle-all').on('click', function (e) {
+    e.preventDefault()
+    inputsComponent.attr('checked', !inputsComponent.is(':checked'))
+  })
+
+  $('#plugins.download .toggle-all').on('click', function (e) {
+    e.preventDefault()
+    inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
+  })
+
+  // request built javascript
+  $('.download-btn').on('click', function () {
+
+    var comp = $("#components.download input:checked")
+          .map(function () { return this.value })
+          .toArray()
+      , plug = $("#plugins.download input:checked")
+          .map(function () { return this.value })
+          .toArray()
+
+    
+
+    $.ajax({
+      type: 'POST'
+    , dataType: 'jsonpi'
+    , params: {
+        branch: '2.0-wip'
+      , dir: 'js'
+      , filenames: names
+      , compress: buildTypes.first().hasClass('active')
+      }
+    , url: "http://bootstrap.herokuapp.com"
+    })
+  })
+
+})
+
diff --git a/docs/download.html b/docs/download.html
index 89077d247896cf62b3041a99fad141ba8c053114..afc189fb38d628a1e5f6d3722805f5acd8c95d64 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -230,6 +230,10 @@
   </div>
   <div class="row download-builder">
     <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-transition.js">
+        Transitions <small>(required for any animation)</small>
+      </label>
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-modal.js">
         Modals
@@ -250,12 +254,12 @@
         <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
         Tooltips
       </label>
+    </div><!-- /span -->
+    <div class="span4">
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-popover.js">
         Popovers <small>(requires Tooltips)</small>
       </label>
-    </div><!-- /span -->
-    <div class="span4">
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-alert.js">
         Alert messages
@@ -276,10 +280,6 @@
         <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
         Typeahead
       </label>
-      <label class="checkbox">
-        <input type="checkbox" checked="true" value="bootstrap-transition.js">
-        Transitions <small>(required for any animation)</small>
-      </label>
     </div><!-- /span -->
     <div class="span4">
       <h4 class="muted">Heads up!</h4>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 673bed9121d0430a3479c7d025ffb59f97e3a05e..037690e73a6219f6e406da80c99a5a3dbdd772d8 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -165,6 +165,10 @@
   </div>
   <div class="row download-builder">
     <div class="span4">
+      <label class="checkbox">
+        <input type="checkbox" checked="true" value="bootstrap-transition.js">
+        Transitions <small>(required for any animation)</small>
+      </label>
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-modal.js">
         Modals
@@ -185,12 +189,12 @@
         <input type="checkbox" checked="true" value="bootstrap-tooltip.js">
         Tooltips
       </label>
+    </div><!-- /span -->
+    <div class="span4">
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-popover.js">
         Popovers <small>(requires Tooltips)</small>
       </label>
-    </div><!-- /span -->
-    <div class="span4">
       <label class="checkbox">
         <input type="checkbox" checked="true" value="bootstrap-alert.js">
         Alert messages
@@ -211,10 +215,6 @@
         <input type="checkbox" checked="true" value="bootstrap-typeahead.js">
         Typeahead
       </label>
-      <label class="checkbox">
-        <input type="checkbox" checked="true" value="bootstrap-transition.js">
-        Transitions <small>(required for any animation)</small>
-      </label>
     </div><!-- /span -->
     <div class="span4">
       <h4 class="muted">Heads up!</h4>