How to order divs in bootstrap 4?

Question

I have to divs next to each other in a row div. On mobile, i want the right_side div(col-md-9) to be the first div.

I tryed ordering it with flex, but it messed up all my site.

<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

If i am viewing the site on mobile or tablet, i want the col-md-9 div as first div.

score 1 · Answer 1 · answered Sep 04 '19 at 07:36

@media screen and (max-width: 767px) {
  .col-md-3 {
    order: 2;
  }
  .col-md-9 {
    order: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-3">Left side</div>
  <div class="col-md-9">Right side, but first on mobile or tablet</div>
  <div class="clearfix"></div>
</div>

Pushprajsinh Chudasama · Answer 2 · 2019-09-04T07:45:29.563

you can do with flex and order as below example.

If it is messing-up with all sites, then give your custom class and then give CSS.

@media screen and (max-width: 531px) {
    .row { display: flex; flex-direction: column; }
    .two { order: 1; }
    .one { order: 2 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="row">
   <div class="col-md-3 one">Left side</div>
   <div class="col-md-9 two">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

Amaresh S M · Answer 3 · 2019-09-04T07:39:10.627

Just use order property.

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

@media only screen and (max-width: 760px) {
  .col-md-3 {
 order:2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
   <div class="col-md-3">Left side</div>
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="clearfix"></div>
</div>

score 0 · Answer 4 · answered Sep 04 '19 at 07:35

there is an option to reverse the row using class. here is the code please try it once.

<div class="row flex-row-reverse">
   <div class="col-md-9">Right side, but first on mobile or tablet</div>
   <div class="col-md-3">Left side</div>
   <div class="clearfix"></div>
</div>

score 0 · Answer 5 · answered Sep 04 '19 at 07:39

Use Column Ordering to accomplish this.

col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.

I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...

See Code

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port >= md

|A|B|

view-port < md

|B|
|A|

How to order divs in bootstrap 4?

5 Answers5