diff options
| -rw-r--r-- | scss/_utilities.scss | 9 | ||||
| -rw-r--r-- | site/content/docs/4.3/layout/grid.md | 6 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 | ||||
| -rw-r--r-- | site/content/docs/4.3/utilities/flex.md | 16 |
4 files changed, 19 insertions, 13 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index e22935d827..35a67d3fd3 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -195,14 +195,7 @@ $utilities: map-merge( 3: 3, 4: 4, 5: 5, - 6: 6, - 7: 7, - 8: 8, - 9: 9, - 10: 10, - 11: 11, - 12: 12, - last: 13, + last: 6, ), ), // Margin utilities diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index df606e2224..0da95311fe 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -543,7 +543,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 `12` across all five 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 five grid tiers. <div class="bd-example-row"> {{< example >}} @@ -552,7 +552,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes <div class="col"> First, but unordered </div> - <div class="col order-12"> + <div class="col order-5"> Second, but last </div> <div class="col order-1"> @@ -563,7 +563,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes {{< /example >}} </div> -There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed. +There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed. <div class="bd-example-row"> {{< example >}} diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md index 59c0c8af6f..3db2a451fb 100644 --- a/site/content/docs/4.3/migration.md +++ b/site/content/docs/4.3/migration.md @@ -96,6 +96,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be ## Utilities - Renamed `.text-monospace` to `.font-monospace` +- Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12`. [See #28874](https://github.com/twbs/bootstrap/pull/28874). - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore - **Todo:** Split utilities into property-value utility classes and helpers diff --git a/site/content/docs/4.3/utilities/flex.md b/site/content/docs/4.3/utilities/flex.md index 244fc2198c..5c199871ec 100644 --- a/site/content/docs/4.3/utilities/flex.md +++ b/site/content/docs/4.3/utilities/flex.md @@ -423,7 +423,7 @@ Responsive variations also exist for `flex-wrap`. ## Order -Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed. +Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed. {{< example >}} <div class="d-flex flex-nowrap bd-highlight"> @@ -438,7 +438,19 @@ Responsive variations also exist for `order`. {{< markdown >}} {{< flex.inline >}} {{- range $bp := $.Site.Data.breakpoints -}} -{{- range $i, $num := seq 0 12 }} +{{- range $i, $num := seq 0 5 }} +- `.order{{ $bp.abbr }}-{{ $i }}` +{{- end -}} +{{- end -}} +{{< /flex.inline >}} +{{< /markdown >}} + +Additionaly there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. + +{{< markdown >}} +{{< flex.inline >}} +{{- range $bp := $.Site.Data.breakpoints -}} +{{- range $i := slice "first" "last" }} - `.order{{ $bp.abbr }}-{{ $i }}` {{- end -}} {{- end -}} |