Bootstrap の Grid system サンプル２

画面サイズとクラスプレフィックス（.col-**）の関係

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<ul id="display" class="list-inline">
    <li>Window : <span id="window-width"></span></li>
    <li>Container : <span id="container-width"></span></li>
    <li>Column : <span id="column-width"></span></li>
</ul>
<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-sm-3">col-sm-3</div>
    </div>
    <div class="row">
        <div class="col-md-2">col-md-2</div>
    </div>
    <div class="row">
        <div class="col-lg-1">col-lg-1</div>
    </div>
</div>

CSS

div {text-align: center;}

.col-xs-1 {border: 1px solid blue;}
.col-sm-3 {border: 1px solid green;}
.col-md-2 {border: 1px solid orange;}
.col-lg-1 {border: 1px solid red;}

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

JavaScript

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

showWidth();

function showWidth() {
    var w = $(window).innerWidth();
    
    $('#display')
    .toggleClass('large', 1200 <= w)
    .toggleClass('medium', 992 <= w && w < 1200)
    .toggleClass('small', 768 <= w && w < 992)
    .toggleClass('x-small', w < 768);
    
    $('#window-width').text(w + ' px');
    $('#container-width').text($('.container').innerWidth() + ' px');
    $('#column-width').text($('.col-xs-1').innerWidth() + ' px');
}