Bootstrap dynamic col resize

Question

So what I'm trying to achieve is that. When the page first loads, I want this to be displayed:

col-md-6 | col-md-3 | col-md-3

But when the window is resized (or when viewed on smaller screen devices), I want to have

col-md-4 | col-md-4 | col-md-4

Is there a way to do this using Bootstrap without CSS hackery?

why do you need to do that using jquery when bootstrap offers col-sm and col-xs and all?? — RaJesh RiJo, Sep 07 '17 at 17:05
Read the [Bootstrap docs](https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match) — Carol Skelly, Sep 07 '17 at 17:32

score 0 · Answer 1 · answered Sep 07 '17 at 17:15

I think you need something like this.

<div class="row">
  <div class="col-md-6 col-sm-4"></div>
  <div class="col-md-3 col-sm-4"></div>
  <div class="col-md-3 col-sm-4"></div>
</div>

What this does is, for medium to large screens, the size would be in the ratio 6/12, 3/12 and 3/12.

and for smaller screens, the divs would take 4/12, 4/12, 4/12 of the available width.

1 Answers1