Different row > col disposition by screen size (bootstrap)

Question

I would like to have two differents row > cols disposition depends on screen size. Example, i got actually this for md screen:

<div class="row align-items-md-center">
  <div class="col-6">1</div>
  <div class="col-2">2</div>
  <div class="col-2">3</div>
  <div class="col-2">4</div>
</div>

And for mobile i would like:

<div class="row align-items-md-center">
  <div class="col-6">1</div>
  <div class="col-2">4</div>
  <div class="col-2">2</div>
  <div class="col-2">3</div>
</div>

Someone already got this problem?

Thanks

Answer 1

Can be done using order property works for flex layouts.

Here take a look at this, here I have added classes for columns and according to the requirement I have changed the order of the .div-3 and div-2 . By default all flex-items have 0 order, so I changed the order of those div to 1 in the media query so that the divs having order 1 will come after the divs having order 0.

 .row { display: flex; } @media only screen and (max-width: 480px) {.div-2, .div-3 { order: 1; } }

 <div class="row align-items-md-center"> <div class="col-6 div-1">1</div> <div class="col-2 div-2">2</div> <div class="col-2 div-3">3</div> <div class="col-2 div-4">4</div> </div>

Answer 2

You could also do it like this, without any additional classes:

 .row { display: flex; } @media only screen and (max-width: 599px) {.row > div:nth-child(2), .row > div:nth-child(3) { order: 1; } }

 <div class="row align-items-md-center"> <div class="col-6">1</div> <div class="col-2">2</div> <div class="col-2">3</div> <div class="col-2">4</div> </div>