SCSS bootstrap btn-group Media Query multiple pages - ruby

Question

I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.

Answer 1

I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}