bootstrap3 グリッドシステム col-sm やら col-xsの意味について

bootstrapのグリッドシステムを利用する際にcol-smやらcol-xsを指定する。

グリッドって分かりにくいんだけど、ポイントは12分割がベースってこと。
例えば

<div class="col-sm-6 col-xs-12">hoge<div>
<div class="col-sm-6 col-xs-12">hoge<div>

みたいな指定をした場合、col-sm即ちタブレット以上サイズ(pc含む)の場合は、6/12即ちdivを一行の半分のサイズで表示するって意味。col-xs即ちスマホ以下の場合は、12/12即ちdivを横一行全部使って表示しますよ、という意味。

<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>
<div class="col-sm-3 col-xs-6">hoge<div>

この場合、PCの場合はdivを一行の1/4(3/12)で表示し、スマホの場合はdivを一行の半分(6/12)で表示することになる。

16/9/22追記
「タブレット以上は一行の半分、スマホは一行全部」としたい場合の指定

class="col-xs-6" /* 間違い */
class="col-sm-6" /* 正解 */

16/9/23さらに追記

col-sm-6 col-md-3

と指定したのに、スマホサイズ(col-xs)で一行全部にならなかった。

col-xs-12 col-sm-6 col-md-3

と指定したところ正しく動いたので、やはり明示的にcol-xs-12を付けないといけないかも。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html