Bootstrapにおける小さい画面(767px以下）でカテゴリーを上に表示する方法（pushとpullを使って）

完成イメージはこちらをクリック

HTML

<div class=”container”>

<div class=”row”>
<div class=”col-sm-12″>
<div class=”header”>
<h1><a href=”#”><img src=”bicycle.png” alt=”” class=”logo”>BICYCLE</a></h1>
</div>
</div><!–col–>
</div><!–row–>

<!– 2行目 –>
<div class=”row”>
<div class=”col-sm-12″>
<div class=”menu”>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Bootstrap</a></li>
<li><a href=”#”>Javascript</a></li>
</ul>
</div>
</div><!–col–>
</div><!–row–>

<!– 3行目 –>
<div class=”row”>

<div class=”col-sm-4 col-sm-push-8″>
<div class=”menu”>
　　　<h3>カテゴリー</h3>
<ul>
<li><a href=”#”>旅の思い出</a></li>
<li><a href=”#”>おすすめのサイクリングロード</a></li>
<li><a href=”#”>ハプニング</a></li>
<li><a href=”#”>気を付けること</a></li>
</ul>
</div>
</div><!–col–>

<div class=”col-sm-8 col-sm-pull-4″>
<div class=”entry”>
<img src=”photo.jpg” alt=”” >
<h3>記事タイトル</h3>
<div class=”added”>
<p>
<a href=”#” >自転車の旅</a><br>
<a href=”#” >おすすめのサイクリングロードはこちら</a>
</p>
</div>
<p>北海道を～。</p>
<p>孤独との～。</p>
</div>
</div><!–col–>
</div> <!–row–>

<!– 4行目 –>
<div class=”row”>
<div class=”col-sm-12″>
<p>Copyright ©自転車旅行</p>
</div><!–col–>
</div><!–row–>

</div><!–container–>

記事タイトル～　、カテゴリー～の順番で記述していると、極小画面（767px以下）では記事の下にカテゴリーが表示されます。

そこで、カテゴリー～、記事タイトルの順に入れ替えます。これでカテゴリーは極小画面で上に表示されますが、push、pullを設定しないと画面を大きくしたときにカテゴリーは左側に表示されてしまいます。

そこで大きい画面（768px以上）で表示したときのカテゴリーの配置を右（push）に8幅分、記事の配置を左（pull）に4幅分だけずらすように指定します。すると本来の位置の右側に表示されます。

＊尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.

レベルアップにプロからの学びを。