Is there a way to dynamically adjust the bootstrap class of a grid element from col-md-9 to col-md-12 only when the grid breaks due to resizing the browser window?
For example, consider the following code snippet:
https://jsfiddle.net/kp41m0xq/
<body>
<div class="row">
<div class="col-md-3">
<!-- Something, graph or so -->
</div>
<div class="col-md-9">
<!-- Something, graph or so -->
</div>
</div>
</body>
When the window size is large, it looks like this:
https://i.sstatic.net/UrWKk.png
But when the window size is small, it looks like this:
https://i.sstatic.net/MSgur.png
To achieve the desired effect of having the class as col-md-9 when the window is big and col-md-12 when the window is small, is there a way to do it using bootstrap itself? If not, would using jquery be a viable solution?