Add responsive Order classes for Flexbox reordering #21594
Conversation
scss/_grid.scss
Outdated
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Files should end with a trailing newline
scss/_grid.scss
Outdated
| @@ -50,3 +50,13 @@ | |||
| @if $enable-grid-classes { | |||
| @include make-grid-columns(); | |||
| } | |||
|
|
|||
| @each $size, $pixels in $grid-breakpoints { | |||
| @include media-breakpoint-up($size) { | |||
There was a problem hiding this comment.
Line should be indented with spaces, not tabs
|
You'll need to remove the |
|
What mdo meant was to not change the git reset 65ffb1c
git checkout dist/
git add scss/_grid.scss
git commit -m 'Added flexbox .order-* classes.'
git push -f |
…t xs being the default size.
scss/_grid.scss
Outdated
| order:$i; | ||
| } | ||
| } | ||
| @else { |
There was a problem hiding this comment.
@else should be placed on same line as previous curly brace
scss/_grid.scss
Outdated
| @for $i from 1 to $grid-columns { | ||
| @if $size=='xs' { | ||
| .order-#{$i}{ | ||
| order:$i; |
There was a problem hiding this comment.
Colon after property should be followed by at least one space
scss/_grid.scss
Outdated
| @include media-breakpoint-up($size) { | ||
| @for $i from 1 to $grid-columns { | ||
| @if $size=='xs' { | ||
| .order-#{$i}{ |
There was a problem hiding this comment.
Opening curly brace { should be preceded by one space
scss/_grid.scss
Outdated
| $pixels in $grid-breakpoints { | ||
| @include media-breakpoint-up($size) { | ||
| @for $i from 1 to $grid-columns { | ||
| @if $size=='xs' { |
There was a problem hiding this comment.
$size=='xs' should be written with a single space on each side of the operator: $size == 'xs'
Prefer double-quoted strings
|
This would be a very nice thing to have |
|
This was addressed in #22942. |
Add in dynamic classes that change the
order:...CSS property for flex columns. For example, using the following HTML:Results in two fairly different views:
Desktop / Full View
Mobile / Small View
Without Order Classes