1 files changed, 21 insertions, 4 deletions
diff --git a/site/content/docs/5.2/layout/columns.md b/site/content/docs/5.3/layout/columns.md
index e2dbd3f..e6f5255 100644
--- a/site/content/docs/5.2/layout/columns.md
+++ b/site/content/docs/5.3/layout/columns.md
@@ -24,6 +24,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
+Change the vertical alignment with any of the responsive `align-items-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row align-items-start">
@@ -37,6 +39,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-center">
     <div class="col">
       One of three columns
@@ -48,6 +55,11 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
   <div class="row align-items-end">
     <div class="col">
       One of three columns
@@ -62,6 +74,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 </div>
 {{< /example >}}
 
+Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
+
 {{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container text-center">
   <div class="row">
@@ -80,6 +94,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Horizontal alignment
 
+Change the horizontal alignment with any of the responsive `justify-content-*` classes.
+
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
   <div class="row justify-content-start">
@@ -187,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
 
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
@@ -287,11 +303,12 @@ With the move to flexbox in v4, you can use margin utilities like `.me-auto` to
 
 The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
-{{< example >}}
-<div class="col-3 bg-light p-3 border">
+{{< example class="bd-example-row" >}}
+<div class="col-3 p-3 mb-2">
   .col-3: width of 25%
 </div>
-<div class="col-sm-9 bg-light p-3 border">
+
+<div class="col-sm-9 p-3">
   .col-sm-9: width of 75% above sm breakpoint
 </div>
 {{< /example >}}