Bootstrapを使ったレイアウトサンプル
今、見えているレイアウトは、「Extra small devices」用（＝横幅768px未満にだけ表示）です。
今、見えているレイアウトは、「Small devices」用（＝768px～991pxにだけ表示）です。
今、見えているレイアウトは、「Medium devices」用（＝992px～1199pxにだけ表示）です。
今、見えているレイアウトは、「Large devices」用（＝1200px以上にだけ表示）です。
サンプル1
以下の4段は、描画領域の横幅に応じて、段組の構造が変わります。
ウインドウサイズをいろいろ変化させて、表示を確認してみてください。
《第1段》
色はにほへど散りぬるを、我が世たれぞ常ならむ、有為の奥山今日越えて、浅き夢見じ酔ひもせず。
《第2段》
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
《第3段》
Oh, wet Alex, a jar, a fag! Up, disk, curve by! Man Oz, Iraq, Arizona, my Bev? Ruck's id-pug, a far Ajax, elate? Who?
《第4段》
The quick brown fox jumps over the lazy dog. Jackdaws love my big sphinx of quartz. Cozy lummox gives smart squid who asks for job pen.
サンプル2
以下の3段は、描画領域の横幅が「Small devices」（＝768px）以上であれば、横並びの3段組になります。
それ以下なら、段組が解除されます。
《第1段》
色はにほへど散りぬるを、我が世たれぞ常ならむ、有為の奥山今日越えて、浅き夢見じ酔ひもせず。
《第2段》
いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
《第3段》
イロハニホヘト チリヌルヲ ワカヨタレソ ツネナラム ウヰノオクヤマ ケフコエテ アサキユメミシ ヱヒモセス
参考
以下の4段は、描画領域のサイズがどうであっても、横並びの4段組で表示されます。
《第1段》
色はにほへど散りぬるを、我が世たれぞ常ならむ、有為の奥山今日越えて、浅き夢見じ酔ひもせず。
《第2段》
イロハニホヘト チリヌルヲ ワカヨタレソ ツネナラム ウヰノオクヤマ ケフコエテ アサキユメミシ ヱヒモセス
《第3段》
色はにほへど散りぬるを、我が世たれぞ常ならむ、有為の奥山今日越えて、浅き夢見じ酔ひもせず。
《第4段》
イロハニホヘト チリヌルヲ ワカヨタレソ ツネナラム ウヰノオクヤマ ケフコエテ アサキユメミシ ヱヒモセス
サンプルは以上です。