Fix #12073: Consistent order of variations

This changes the order of component variations throughout the repo (code and docs) to be more consistent.
The order now used everywhere is the one most frequently found in the repo before:
Default, Primary, Success, Info, Warning, Danger

docs/components.html

@@ -2616,17 +2616,17 @@ body { padding-bottom: 70px; }
         <div class="col-sm-6">
           <ul class="list-group">
             <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
             <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
             <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
-            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
           </ul>
         </div>
         <div class="col-sm-6">
           <div class="list-group">
             <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
             <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
             <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
-            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
           </div>
         </div>
       </div>
@@ -2634,15 +2634,15 @@ body { padding-bottom: 70px; }
 {% highlight html %}
 <ul class="list-group">
   <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
   <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
   <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
-  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
 </ul>
 <div class="list-group">
   <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
   <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
   <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
-  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
 </div>
 {% endhighlight %}
 

docs/css.html

@@ -1310,6 +1310,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </td>
             <td>Indicates a successful or positive action</td>
           </tr>
+          <tr>
+            <td>
+              <code>.info</code>
+            </td>
+            <td>Indicates a neutral informative change or action</td>
+          </tr>
           <tr>
             <td>
               <code>.warning</code>
@@ -1322,12 +1328,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </td>
             <td>Indicates a dangerous or potentially negative action</td>
           </tr>
-          <tr>
-            <td>
-              <code>.info</code>
-            </td>
-            <td>Indicates a neutral informative change or action</td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -1366,7 +1366,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="warning">
+          <tr class="info">
             <td>5</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1378,7 +1378,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="danger">
+          <tr class="warning">
             <td>7</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -1390,7 +1390,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
-          <tr class="info">
+          <tr class="danger">
             <td>9</td>
             <td>Column content</td>
             <td>Column content</td>
@@ -2848,17 +2848,17 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="color-swatches">
         <div class="color-swatch brand-primary"></div>
         <div class="color-swatch brand-success"></div>
+        <div class="color-swatch brand-info"></div>
         <div class="color-swatch brand-warning"></div>
         <div class="color-swatch brand-danger"></div>
-        <div class="color-swatch brand-info"></div>
       </div>
     </div>
 {% highlight css %}
 @brand-primary: #428bca;
 @brand-success: #5cb85c;
+@brand-info:    #5bc0de;
 @brand-warning: #f0ad4e;
 @brand-danger:  #d9534f;
-@brand-info:    #5bc0de;
 {% endhighlight %}
 
     <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>