Bootstrap の Grid system サンプル３

画面サイズに合わせてカラムの幅（列数）を変更する

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-4  col-sm-6 col-xs-8">
            <span class="large">col-lg-5</span>
            <span class="medium">col-md-4</span>
            <span class="small">col-sm-6</span>
            <span class="x-small">col-xs-8</span>
        </div>
    </div>
</div>

CSS

.col-xs-1 {border:1px solid blue;}

div.x-small {border: 1px solid blue;}
div.small {border: 1px solid green;}
div.medium {border: 1px solid orange;}
div.large {border: 1px solid red;}
div {text-align: center;}

span.x-small {color: blue;}
span.small {color: green;}
span.medium {color: orange;}
span.large {color: red;}

.inactive {opacity: 0.2;}

JavaScript

$(window).resize(function() {
    showWidth();
});

showWidth();

function showWidth() {
    var w = $(window).innerWidth();
    
    $('.large').toggleClass('inactive', w < 1200);
    $('.medium').toggleClass('inactive', w < 992 || 1200 <= w);
    $('.small').toggleClass('inactive', w < 768 || 992 < w);
    $('.x-small').toggleClass('inactive', 768 <= w);
    
    $('.row:last div').toggleClass('large', 1200 <= w)
                      .toggleClass('medium', 992 <= w && w < 1200)
                      .toggleClass('small', 768 <= w && w < 992)
                      .toggleClass('x-small', w < 768);
}