Twitter Bootstrap: Modifying pixel width thresholds for col-sm - css

Question

I have the following issue (best illustrated by images):
Medium width (using col-md-3)
Small width (using col-sm-6)
Width between small and medium
The columns resize at 979px-1199px width to show the last image (the bad configuration)...
The other option for me would be creating an intermediary class .. say col-mdsm or something and setting that pixel range for it?

Answer 1

You can change the font size for this element manually:
#media (min-width: 979px and max-width: 1199px) {
.elem-class-name {
font-size: 13px; /*Needs to be adjusted */
}
}

Answer 2

This is not an answer to your specific question, but I hope it will help others to "Step Away from the Grid System" when it hinders the desired result.
If you look at GetBootstrap.com -- the official Bootstrap website -- in the Glyphicon example that is a list and it's not a class that comes with Bootstrap. It's not the grid system. In fact there's a lot of custom CSS on GetBootstrap.com with added classes. If you look at any of the showcase sites, there's plenty of custom CSS and plenty of not using anything to do with Bootstrap. You can hardly find a Bootstrap class in Vogue.com yet it's still part of the showcase sites, go figure.
Anyway, I would roll a custom list, just like GetBootstrap.com did for their Glyphicon list:
DEMO: https://jsbin.com/yumoca/
HTML
<div class="container">
<ul class="audio-list list-inline">
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Lorem ipsum dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
CSS
.audio-list {
text-align: center;
}
.audio-list li {
display: inline-block;
padding: 5px;
white-space:normal;
}
.audio-list li a {
display: block;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
background: #f7f7f7;
text-align:center;
color:inherit;
}
#media (min-width:768px) {
.audio-list {
font-size: 0px;
text-align:left;
}
.audio-list li {
display: inline-block;
width: 50%;
font-size: 14px;
vertical-align: top;
}
}
#media (min-width:992px) {
.audio-list li {
width: 33.33%
}
}