Create custom col sizes in bootstrap - css

Question

I'm taking advantage of the xs sm md lg columns in order to define how large the columns should be at different screen sizes. It is working fine but I would like to have more fine tuned control and define my own custom sizes.
For instance I'd like to have a col size that exists between xs and sm.
I added a col-ss class like so:
#media (min-width: 600px)
.col-ss-4 {
width: 33.33333333333333%;
}
#media (min-width: 600px)
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
And added the class like so:
<div class="col-sm-5 col-ss-4">Content Here</div>
But it seems to have no effect.

Answer 1

Bootstrap is a really big framework. If you're looking to change the foundational structure then you're no longer using bootstrap, which is fine. However, you'll want to modify the foundation of bootstrap by using the preprocessors like LESS and SASS. This at least allows you to keep the code modularized. Something like this could very easily be added by modifying the following.
github variables.less
github grid.less
If you're looking for an answer more specific than this, you'd be better off following a tutorial that will take you step by step.
add-xl-grid-size-option
For a time estimate, expect about 30-45 minutes your first time doing this.

Answer 2

You might want to try the code below. you don't minimum multiple media queries for the same min-width size. if you can use less, you had be able to copy classes.
You can customize bootstrap files using bootstrap customize
#media only screen and (min-device-width: 600px){
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
.col-ss-4 {
width: 33.33333333333333%;
}
}

Answer 3

Go through this page to "customize" everything bootstrap. Then you can export your results.
Bootstrap customize files here