diff options
| -rw-r--r-- | docs/4.0/layout/grid.md | 6 | ||||
| -rw-r--r-- | scss/mixins/_grid-framework.scss | 10 |
2 files changed, 7 insertions, 9 deletions
diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index efbc5520d..320872849 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -534,14 +534,14 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes {% endexample %} </div> -There's also a responsive `.order-first` class that quickly changes the order of one element by applying `order: -1`. This class 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: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed. <div class="bd-example-row"> {% example html %} <div class="container"> <div class="row"> - <div class="col"> - First, but unordered + <div class="col order-last"> + First, but last </div> <div class="col"> Second, but unordered diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 4f854f495..7b37f868f 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -46,14 +46,12 @@ } } - .order#{$infix}-first { - order: -1; - } + .order#{$infix}-first { order: -1; } + + .order#{$infix}-last { order: $columns + 1; } @for $i from 0 through $columns { - .order#{$infix}-#{$i} { - order: $i; - } + .order#{$infix}-#{$i} { order: $i; } } // `$columns - 1` because offsetting by the width of an entire row isn't possible |