Reorder the columns on bootstrap for large screens

user_8276789 0
Viewed 23

Using bootstrap 4 and with mobile first approach the columns stack perfectly on top of each other for smaller screens

<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3  ">
  <h1>1</h1>
</div>
<div class="col-sm-12 col-md-9 col-lg-9 col-xl-9 ">
  <h1>2</h1>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3  pull-left">
  <h1>3</h1>
</div>

enter image description here

But on a larger screen the columns reorder and looks something like this

enter image description here

The intended order needs to look like this

enter image description here

Ordering columns doesn't seem to work either. Would like to know about other approaches to achieve this

Thank you!

bootstrap-4 css html
1 Answers

This is a pretty tricky thing to achieve because its now moving into a masonry type layout rather than the standard columns and rows that bootstrap is used to. You could do something like that using the card-columns component.

https://getbootstrap.com/docs/4.0/components/card/#card-columns

<div class="card-columns">
  <div class="card">
   1
  </div>
  <div class="card">
   2
  </div>
  <div class="card">
   3
  </div>
 
</div>

Then if you are using sass you just use this.

.card-columns {
  @include media-breakpoint-between(xs, sm) 
    column-count: 3;
  }
  @include media-breakpoint-between(md, xl) 
    column-count: 2;
  }
}
user_82182030
Related