Update docs and carousel example for `order-`.

docs/4.0/examples/carousel/index.html

@@ -136,11 +136,11 @@
       <hr class="featurette-divider">
 
       <div class="row featurette">
-        <div class="col-md-7 push-md-5">
+        <div class="col-md-7 order-md-2">
           <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
-        <div class="col-md-5 pull-md-7">
+        <div class="col-md-5 order-md-1">
           <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>

docs/4.0/utilities/flex.md

@@ -349,18 +349,19 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
 
 {% example html %}
 <div class="d-flex flex-nowrap bd-highlight">
-  <div class="order-last p-2 bd-highlight">First flex item</div>
-  <div class="p-2 bd-highlight">Second flex item</div>
-  <div class="order-first p-2 bd-highlight">Third flex item</div>
+  <div class="order-3 p-2 bd-highlight">First flex item</div>
+  <div class="order-2 p-2 bd-highlight">Second flex item</div>
+  <div class="order-1 p-2 bd-highlight">Third flex item</div>
 </div>
 {% endexample %}
 
 Responsive variations also exist for `order`.
 
 {% for bp in site.data.breakpoints %}
-- `.order{{ bp.abbr }}-first`
-- `.order{{ bp.abbr }}-last`
-- `.order{{ bp.abbr }}-0`{% endfor %}
+  {% for i in (1..12) %}
+  - `.order{{ bp.abbr }}-{{ i }}`
+  {% endfor %}
+{% endfor %}
 
 ## Align content