diff --git a/site/content/docs/5.3/layout/columns.md b/site/content/docs/5.3/layout/columns.md index e6f525563105..7b6aee8a4b40 100644 --- a/site/content/docs/5.3/layout/columns.md +++ b/site/content/docs/5.3/layout/columns.md @@ -203,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. If you need more `.order-*` classes, you can modify the default number via Sass variable. +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. {{< example class="bd-example-row" >}}
@@ -239,6 +239,33 @@ There are also responsive `.order-first` and `.order-last` classes that change t
{{< /example >}} +If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for details. + +```scss +$utilities: map-merge( + $utilities, + ( + "order": + ( + responsive: true, + property: order, + // Keep the existing `.order-*` utilities + values: ( + first: -1, + 0: 0, + 1: 1 + 2: 2, + 3: 3, + 4: 4, + 5: 5, + 6: 6, // Add a new `.order-{breakpoint}-6` utility + last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number + ) + ) + ) +); +``` + ### Offsetting columns You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.