Bootstrap - How can I force col-xs-12 to custom minimum browser window width?

Question

I have some Bootstrap rows whith two columns. Something like this:

<div class="row">
  <div class="col-xs-12 col-sm-6">...</div>
  <div class="col-xs-12 col-sm-6">...</div>
</div>

I'd like to force the columns to perform "col-xs-12" with a window width <= 720px.

How can this be achieved?

Answer 1

Default behaviour is that col-xs-number class is working on screens with minimal width until screen reaches 768px. After screen is bigger than 768px it goes to col-sm-number class.

So if you want xs to be for screens until 720px and sm to be from 720px to default 992px (where comes col-md-number class) you would need to go into Bootstrap's css file and edit @media (min-width: 768px) {} content for all col-sm-number classes.

Here is example for latest Bootstrap version (v3.3.5). If you open bootstrap.css file this begins on line number 1778 and goes until line number 1936.

@media (min-width: 720px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-12 {
         width: 100%;
    }
    .col-sm-11 {
         width: 91.66666667%;
    }
    .col-sm-10 {
         width: 83.33333333%;
    }
 ...
}