diff --git a/components.html b/components.html
index f76203a824..c6a670a634 100644
--- a/components.html
+++ b/components.html
@@ -1926,20 +1926,20 @@ body { padding-bottom: 70px; }
     <h2 id="alerts-alternatives">Contextual alternatives</h2>
     <p>Add optional classes to change an alert's connotation.</p>
     <div class="bs-example">
-      <div class="alert alert-danger">
-        <strong>Oh snap!</strong> Change a few things up and try submitting again.
-      </div>
       <div class="alert alert-success">
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
       <div class="alert alert-info">
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
+      <div class="alert alert-danger">
+        <strong>Oh snap!</strong> Change a few things up and try submitting again.
+      </div>
     </div>
 {% highlight html %}
-<div class="alert alert-danger">...</div>
 <div class="alert alert-success">...</div>
 <div class="alert alert-info">...</div>
+<div class="alert alert-danger">...</div>
 {% endhighlight %}
 
     <h2 id="alerts-dismissable">Dismissable alerts</h2>