mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

Rename order utilities to intended class names (#21739)

Browse Source 
* rename order utilities to intended class names

* Documentation fixes.
This commit is contained in:
Mark Otto 2017-01-24 00:01:44 -08:00 committed by GitHub
parent b509dbe75b
commit 519ecc1c69
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/layout/grid.md
View File

@ -514,13 +514,13 @@ Use flexbox utilities for controlling the **visual order** of your content.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col flex-unordered"> <div class="col order-0">
First, but unordered First, but unordered
</div> </div>
<div class="col flex-last"> <div class="col order-last">
Second, but last Second, but last
</div> </div>
<div class="col flex-first"> <div class="col order-first">
Third, but first Third, but first
</div> </div>
</div> </div>

6
docs/utilities/flexbox.md
View File

@ -354,9 +354,9 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
{% example html %} {% example html %}
<div class="d-flex flex-nowrap bd-highlight"> <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="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> </div>
{% endexample %} {% endexample %}
@ -365,7 +365,7 @@ Responsive variations also exist for `order`.
{% for bp in site.data.breakpoints %} {% for bp in site.data.breakpoints %}
- `.order{{ bp.abbr }}-first` - `.order{{ bp.abbr }}-first`
- `.order{{ bp.abbr }}-last` - `.order{{ bp.abbr }}-last`
- `.order{{ bp.abbr }}-unordered`{% endfor %} - `.order{{ bp.abbr }}-0`{% endfor %}
## Align content ## Align content

6
scss/utilities/_flex.scss
View File

@ -6,9 +6,9 @@
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.flex#{$infix}-first { order: -1; } .order#{$infix}-first { order: -1; }
.flex#{$infix}-last { order: 1; } .order#{$infix}-last { order: 1; }
.flex#{$infix}-unordered { order: 0; } .order#{$infix}-0 { order: 0; }
.flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-row { flex-direction: row !important; }
.flex#{$infix}-column { flex-direction: column !important; } .flex#{$infix}-column { flex-direction: column !important; }