Bootstrap Responsive Utilities サンプル１

visible と hidden

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<ul class="list-inline">
    <li>Window : <span id="window-size"></span> px</li>
    <li>Device Size : <span id="device-size"></span></li>
</ul>
<div>
    <h1>visible</h1>
    <div class="visible-xs">visible-xs</div>
    <div class="visible-sm">visible-sm</div>
    <div class="visible-md">visible-md</div>
    <div class="visible-lg">おおきい</div>
</div>
<div>
    <h1>hidden</h1>
    <div class="hidden-xs">大きくなっちゃた</div>
    <div class="hidden-sm">hidden-sm</div>
    <div class="hidden-md">hidden-md</div>
    <div class="hidden-lg">hidden-lg</div>
</div>

CSS

.visible-xs {border: 1px solid blue; color: blue;}
.visible-sm {border: 1px solid green; color: green;}
.visible-md {border: 1px solid orange; color: orange;}
.visible-lg {border: 1px solid red; color: red;}

.hidden-xs {border: 1px solid blue; color: blue;}
.hidden-sm {border: 1px solid green; color: green;}
.hidden-md {border: 1px solid orange; color: orange;}
.hidden-lg {border: 1px solid red; color: red;}

JavaScript

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

showWidth();

function showWidth() {
    var w = $(window).innerWidth();
    var deviceSize = '';
    
    if (1200 <= w) {
        deviceSize = 'Large';
    } else if (992 <= w && w < 1200) {
        deviceSize = 'Medium';
    } else if (768 <= w && w < 992) {
        deviceSize = 'Small';
    } else {
        deviceSize = 'Extra Small';
    }
    
    $('#window-size').text(w);
    $('#device-size').text(deviceSize);
}