diff options
| -rw-r--r-- | docs/layout/grid.md | 6 | ||||
| -rw-r--r-- | docs/utilities/flexbox.md | 6 | ||||
| -rw-r--r-- | scss/utilities/_flex.scss | 6 |
3 files changed, 9 insertions, 9 deletions
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 58e51946e..4d0d3e6e8 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -514,13 +514,13 @@ Use flexbox utilities for controlling the **visual order** of your content. {% example html %} <div class="container"> <div class="row"> - <div class="col flex-unordered"> + <div class="col order-0"> First, but unordered </div> - <div class="col flex-last"> + <div class="col order-last"> Second, but last </div> - <div class="col flex-first"> + <div class="col order-first"> Third, but first </div> </div> diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md index 9b6add5c4..9bca02848 100644 --- a/docs/utilities/flexbox.md +++ b/docs/utilities/flexbox.md @@ -354,9 +354,9 @@ 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="flex-last p-2 bd-highlight">First flex item</div> + <div class="order-last p-2 bd-highlight">First flex item</div> <div class="p-2 bd-highlight">Second flex item</div> - <div class="flex-first p-2 bd-highlight">Third flex item</div> + <div class="order-first p-2 bd-highlight">Third flex item</div> </div> {% endexample %} @@ -365,7 +365,7 @@ Responsive variations also exist for `order`. {% for bp in site.data.breakpoints %} - `.order{{ bp.abbr }}-first` - `.order{{ bp.abbr }}-last` -- `.order{{ bp.abbr }}-unordered`{% endfor %} +- `.order{{ bp.abbr }}-0`{% endfor %} ## Align content diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 1b98aaa3f..cc696785d 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -6,9 +6,9 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .flex#{$infix}-first { order: -1; } - .flex#{$infix}-last { order: 1; } - .flex#{$infix}-unordered { order: 0; } + .order#{$infix}-first { order: -1; } + .order#{$infix}-last { order: 1; } + .order#{$infix}-0 { order: 0; } .flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-column { flex-direction: column !important; } |