root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add order-last grid class (#24915) 

* Add order-*-last grid class

* copy updates
This commit is contained in:
Casper Bornebusch 2018-01-16 18:10:40 +01:00 committed by Mark Otto
parent a531b46453
commit f4132dba07
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/4.0/layout/grid.md
View File

@ -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

10
scss/mixins/_grid-framework.scss
View File

@ -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