Add order first to grid #24202
Add order first to grid #24202
Conversation
scss/mixins/_grid-framework.scss
Outdated
| @@ -46,6 +46,10 @@ | |||
| } | |||
| } | |||
|
|
|||
| .order#{$infix}-first{ | |||
| order: -1; | |||
There was a problem hiding this comment.
Line should be indented 8 spaces, but was indented 9 spaces
scss/mixins/_grid-framework.scss
Outdated
| @@ -46,6 +46,10 @@ | |||
| } | |||
| } | |||
|
|
|||
| .order#{$infix}-first{ | |||
There was a problem hiding this comment.
Opening curly brace { should be preceded by one space
scss/mixins/_grid-framework.scss
Outdated
| @@ -46,6 +46,10 @@ | |||
| } | |||
| } | |||
|
|
|||
| .order#{$infix}-first { | |||
| order: -1; | |||
There was a problem hiding this comment.
Line should be indented 8 spaces, but was indented 10 spaces
docs/4.0/layout/grid.md
Outdated
| @@ -515,7 +515,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset | |||
|
|
|||
| ### 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 `12` across all five grid tiers. You also set the class of an element to be `first` which will give it negative order and so put it before unordered elements. | |||
There was a problem hiding this comment.
You can also make an element appear first with .order-first, which will give it a negative order and thus place it before the unordered elements.
|
Updated the docs here to fix @XhmikosR's feedback by revamping them. We're introducing a new class name, which is best served by a new code example rather than mixing the two. |
|
@mdo that is much clearer, I considered doing that but didn't want to bloat the docs. LGTM though Do you want me to revert the order-first in the code element above or are you happy to keep that? |
|
@lukefrake Just took care of that, good catch. |
|
@mdo no problem, happy to help! |
Fix : #23400