<div class="content-block">
    <div class="col-md-12">
        <h1><?php echo $page->title() ?></h1>
        <p class="lead">An online metronome, implemented using the WebAudioAPI</p>
        <p>Click the button, or press the space bar, to start/stop the metronome</p>
    </div>
    <div class="col-md-12">
        <div class="col-md-4">
            <div id="metronome-on-off" class="metronome-button"></div>
        </div>
        <div class="col-md-4">
            <label for="bpm-control">BPM: 120</label>
            <input id="bpm-control" type="range" name="BPM" min="20" max="300" value="120">
        </div>
    </div>
</div>

<div class="content-block">
    <div class="col-md-12">
        <h1><?php echo $page->title() ?></h1>
        <p class="lead">An online metronome, implemented using the WebAudioAPI</p>
        <p>Click the button, or press the space bar, to start/stop the metronome</p>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="col-md-4">
            <div id="metronome-on-off" class="metronome-button"></div>
        </div>
        <div class="col-md-4">
            <label for="bpm-control">BPM: 120</label>
            <input id="bpm-control" type="range" name="BPM" min="20" max="300" value="120">
        </div>
    </div>
</div>

Make metronome half width on larger displays
Make metronome half width on larger displays
