CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
rmarquet21
rmarquet21

Reputation: 144

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

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 : enter image description here

and on mobile : enter image description here

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>

Upvotes: 0

Views: 449

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

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>

Upvotes: 2

Related Questions