Bootstrap 4 ordering class - html

Question

I have a question about the bootstrap 4.1 reordering. According to the documentation:
Reordering
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.
I've tried to set the reordering only on small and medium screens, using the .orderclasses as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong?
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-sm-1">
<!-- some contents here -->
</div>
</div>
</div>

Answer 1

You need re-order in larger breakpoints, because bootstrap is mobile first approach, (it means it is using min-width in media queries), so when only using sm it will apply properties from sm and up (including md and lg).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-2 order-lg-1">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-1 order-lg-2">
mobile 1st and then desktop 2st
</div>
</div>
</div>
One more thing to know about order in BS4, is that you can you use order-X-first, order-X-last and order-X-0, so here a snippet with those classes. You can see them in this answer
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-4 order-sm-last order-lg-first">
mobile 2nd and then desktop 1st
</div>
<div class="col-sm-12 col-lg-8 order-sm-first order-lg-last">
mobile 1st and then desktop 2st
</div>
</div>
</div>

Answer 2

This is the default behavior of Bootstrap and is expected.
To say it in short words, all bootstrap's breakpoint suffixes (-sm -md ...) work from that breakpoint upward.
So if you set col-sm-6 that means your column will be half the size of row from in sm breakpoint and md and lg unless you overwrite it (e.g. col-md-2 ).
It all goes back here (using min-width in media queries)

Answer 3

Here is an example, how you can do this with media queries:
<div class="row">
<div class="col-12">
<!-- some content -->
</div>
<div class="col-md-9">
<!-- some content -->
</div>
<div class="col-md-3 move-down">
<!-- some content -->
</div>
<div class="col-md-6 move-up">
<!-- some content -->
</div>
<div class="col-md-6">
<!-- some content -->
</div>
</div>
#media (max-width: 767px) {
.move-down {
order: 2;
}
.move-up {
order: 1;
}
}

Answer 4

Have you tried doing order-1, this sets the default for larger screens
<div class="col-sm-12 col-lg-4 order-1 order-sm-2">
<!-- some contents here -->
</div>
<div class="col-sm-12 col-lg-8 order-2 order-sm-1">
<!-- some contents here -->
</div>
Source: Column ordering in Bootstrap 4

Answer 5

I ran into some issues with this as well. Here's the following code that got it to work for me:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 order-sm-2 order-1">
<!-- some contents here -->Content1
</div>
<div class="col-sm-6 order-sm-1 order-2">
<!-- some contents here -->Content2
</div>
</div>
</div>
Edit: Removed .order-md class from respective columns.