右カラムのリンクボタンをレスポンシブ表示にしました

通常業務を終え、今回は右カラムのリンクボタンをグリッド表示するように変更しました。

PCではひとつずつ縦にならんでいますが、タブレットでは、中央カラムの下に移動し、横一列に４つを表示。

スマホでは二つずつに2段に表示。

「お知らせ」を使用して作成していますが、htmlソースで記載しています。

一つずつをDIVでくくりclass指定しています。

<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 10px;">
京町堀
</div>
<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 12px;>
デモサイト
</div>

てな具合に・・・

簡単に説明するとひとつの枠（ここでは右カラム）横幅一杯が12でmdがPC、smがタブレット、xsがスマホ

classを表し、col-「表示するサイズ」-「表示幅の数値」を指定することにより実現しています。

みなさんも一度試されてはいかがでどうでしょうか。

ちょっとレスポンシブを体感・・・