Boostrap 4 grid re-order

问题:

I have the following HTML code using Bootstrap 4:

<div class="row">
  <div class="col-12 col-sm-4">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

I am expecting the third div to be placed in first position on sm screens but it is not. Here is a JSFiddle What have I missed? Thanks!

回答1:

The order class is not really handeling the order of the elements it's instead like a swap system. So you need to declare an order in other divs too

<div class="row">
  <div class="col-12 col-sm-4 order-sm-12">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-12">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

Here's a Fiddle

回答2:

EDITED

I am changing the code in order to adapt it for bootstrap 4 after user comment of @Andrei Gheorghiu

you can use the class order-sm-first which sets the to order=-1, with this code the third div will be displayed as first for screens that are sm or larger meaning larger than 576px

<div class="row">
  <div class="col-12 col-sm-4">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-first">
    Third, but first
  </div>
</div>

here you can see the forked version of you jsfiddle

回答3:

tl;dr:

Change your markup to:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4">
      First, but unordered
    </div>
    <div class="col-12 col-sm-4">
      Second, but unordered
    </div>
    <div class="col-12 col-sm-4 order-first order-md-0">
      Third, but first
    </div>
  </div>
</div>

---

the details

.order-sm-1 will place order: 1 on the element, according to lines #53-#55 in _grid-framework.scss:

@for $i from 0 through $columns {
  .order#{$infix}-#{$i} { order: $i; }
}

But placing order: 1 on one column without the rest having an order will send that column at the end of the stack, because the default value of order is 0. Any following siblings without an order will be placed before your column.

In the same file, at line #49, we find .order#{$infix}-first (which sets order:-1). This will place a column before the rest, as well as .order#{$infix}-last will place it after all the rest.

---

To sum up:

• use .order-sm-last and .order-sm-first to make a column go to front or back of the stack
• use .order-sm-#{n} to give it an order but also set the order on siblings (order-sm-1 will make a column first if you place order-sm-2 (or higher - up to 12) on the other columns).

Note they only defined 12 levels for order, .order-sm-13 won't work, unless you define it yourself.

As a final note: if you want your column ordered on sm and below, your should replace order-sm-1 with order-first order-md-0. .order-first makes it first on all intervals and .order-md-0 sets its order back to 0 on md and above, so it keeps its place in the layout:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4">
      First, but unordered
    </div>
    <div class="col-12 col-sm-4">
      Second, but unordered
    </div>
    <div class="col-12 col-sm-4 order-first order-md-0">
      Third, but first
    </div>
  </div>
</div>