Bootstrap columns: put middle column on a separate row on mobile - html

Question

I have a problem with columns on bootstrap, I don't find how resolves my problem.
I would like it to look like its on pc :
and on mobile :
with the following row and columns,
someone has an idea how doing it ?
<div class="container">
<div class="col-sm-4">
1
</div>
<div class="col-6">
2
</div>
<div class="col-sm-4">
3
</div>
</div>

Answer 1

You can set the order using the Bootstrap order classes order-* and order-sm-*.
In your example:
Column 1 - we don't need to give this a class as it's always in the position it was created in.
Column 2 is order-sm-2 order-3 so it appears 2nd on screens bigger than 576px, and 3rd on all others.
Column 3 isorder-sm-3 order-2 so it appears 3rd on screens bigger than 576px, and 2nd on all others.
Example with sm breakpoint:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-sm-4"> 1 </div>
<div class="col-sm-4 col-6 order-sm-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-sm-3 order-2"> 3 </div>
</div>
</div>
Example with large breakpoint using exactly the same classes except using a larger breakpoint, so you can compare the results in the snippet:
.row div {
border: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-lg-4"> 1 </div>
<div class="col-lg-4 col-6 order-lg-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-lg-3 order-2"> 3 </div>
</div>
</div>