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

less/buttons.less

@@ -60,6 +60,10 @@
 .btn-success {
   .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
+// Info appears as blue-green
+.btn-info {
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+}
 // Warning appears as orange
 .btn-warning {
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
@@ -68,10 +72,6 @@
 .btn-danger {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
-// Info appears as blue-green
-.btn-info {
-  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
-}
 
 
 // Link buttons

less/forms.less

@@ -276,15 +276,15 @@ input[type="checkbox"],
 }
 
 // Feedback states
+.has-success {
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
 .has-warning {
   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
-.has-success {
-  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
-}
 
 
 // Static form control text

less/list-group.less

@@ -91,9 +91,9 @@ a.list-group-item {
 // Organizationally, this must come after the `:hover` states.
 
 .list-group-item-variant(success; @state-success-bg; @state-success-text);
+.list-group-item-variant(info; @state-info-bg; @state-info-text);
 .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
 .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
-.list-group-item-variant(info; @state-info-bg; @state-info-text);
 
 
 // Custom content options

less/panels.less

@@ -59,7 +59,7 @@
   > .table,
   > .table-responsive > .table {
     margin-bottom: 0;
-    
+
     > tbody:last-child,
     > tfoot:last-child {
       > tr:last-child {
@@ -185,12 +185,12 @@
 .panel-success {
   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 }
+.panel-info {
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+}
 .panel-warning {
   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 }
 .panel-danger {
   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 }
-.panel-info {
-  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
-}

less/tables.less

@@ -157,9 +157,9 @@ table {
 // Generate the contextual variants
 .table-row-variant(active; @table-bg-active);
 .table-row-variant(success; @state-success-bg);
+.table-row-variant(info; @state-info-bg);
 .table-row-variant(warning; @state-warning-bg);
 .table-row-variant(danger; @state-danger-bg);
-.table-row-variant(info; @state-info-bg);
 
 
 // Responsive tables

less/theme.less

@@ -63,9 +63,9 @@
 .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
 .btn-primary { .btn-styles(@btn-primary-bg); }
 .btn-success { .btn-styles(@btn-success-bg); }
+.btn-info    { .btn-styles(@btn-info-bg); }
 .btn-warning { .btn-styles(@btn-warning-bg); }
 .btn-danger  { .btn-styles(@btn-danger-bg); }
-.btn-info    { .btn-styles(@btn-info-bg); }
 
 
 

less/type.less

@@ -97,18 +97,6 @@ cite    { font-style: normal; }
     color: darken(@brand-primary, 10%);
   }
 }
-.text-warning {
-  color: @state-warning-text;
-  &:hover {
-    color: darken(@state-warning-text, 10%);
-  }
-}
-.text-danger {
-  color: @state-danger-text;
-  &:hover {
-    color: darken(@state-danger-text, 10%);
-  }
-}
 .text-success {
   color: @state-success-text;
   &:hover {
@@ -121,6 +109,18 @@ cite    { font-style: normal; }
     color: darken(@state-info-text, 10%);
   }
 }
+.text-warning {
+  color: @state-warning-text;
+  &:hover {
+    color: darken(@state-warning-text, 10%);
+  }
+}
+.text-danger {
+  color: @state-danger-text;
+  &:hover {
+    color: darken(@state-danger-text, 10%);
+  }
+}
 
 // Contextual backgrounds
 // For now we'll leave these alongside the text classes until v4 when we can
@@ -134,18 +134,6 @@ cite    { font-style: normal; }
     background-color: darken(@brand-primary, 10%);
   }
 }
-.bg-warning {
-  background-color: @state-warning-bg;
-  a&:hover {
-    background-color: darken(@state-warning-bg, 10%);
-  }
-}
-.bg-danger {
-  background-color: @state-danger-bg;
-  a&:hover {
-    background-color: darken(@state-danger-bg, 10%);
-  }
-}
 .bg-success {
   background-color: @state-success-bg;
   a&:hover {
@@ -158,6 +146,18 @@ cite    { font-style: normal; }
     background-color: darken(@state-info-bg, 10%);
   }
 }
+.bg-warning {
+  background-color: @state-warning-bg;
+  a&:hover {
+    background-color: darken(@state-warning-bg, 10%);
+  }
+}
+.bg-danger {
+  background-color: @state-danger-bg;
+  a&:hover {
+    background-color: darken(@state-danger-bg, 10%);
+  }
+}
 
 
 // Page header

less/variables.less

@@ -20,9 +20,9 @@
 
 @brand-primary:         #428bca;
 @brand-success:         #5cb85c;
+@brand-info:            #5bc0de;
 @brand-warning:         #f0ad4e;
 @brand-danger:          #d9534f;
-@brand-info:            #5bc0de;
 
 // Scaffolding
 // -------------------------
@@ -131,6 +131,10 @@
 @btn-success-bg:                 @brand-success;
 @btn-success-border:             darken(@btn-success-bg, 5%);
 
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
 @btn-warning-color:              #fff;
 @btn-warning-bg:                 @brand-warning;
 @btn-warning-border:             darken(@btn-warning-bg, 5%);
@@ -139,10 +143,6 @@
 @btn-danger-bg:                  @brand-danger;
 @btn-danger-border:              darken(@btn-danger-bg, 5%);
 
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 5%);
-
 @btn-link-disabled-color:        @gray-light;
 
 
@@ -506,9 +506,9 @@
 
 @progress-bar-bg:             @brand-primary;
 @progress-bar-success-bg:     @brand-success;
+@progress-bar-info-bg:        @brand-info;
 @progress-bar-warning-bg:     @brand-warning;
 @progress-bar-danger-bg:      @brand-danger;
-@progress-bar-info-bg:        @brand-info;
 
 
 // List group
@@ -547,6 +547,10 @@
 @panel-success-border:        @state-success-border;
 @panel-success-heading-bg:    @state-success-bg;
 
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
 @panel-warning-text:          @state-warning-text;
 @panel-warning-border:        @state-warning-border;
 @panel-warning-heading-bg:    @state-warning-bg;
@@ -555,10 +559,6 @@
 @panel-danger-border:         @state-danger-border;
 @panel-danger-heading-bg:     @state-danger-bg;
 
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
-
 
 // Thumbnails
 // -------------------------