Html/bootstrap/bootstrap3/端末サイズ別block設定
提供: 初心者エンジニアの簡易メモ
2015年5月20日 (水) 03:17時点における127.0.0.1 (トーク)による版 (ページの作成:「スマホだと横2列、タブレットサイズ以上だと横３列 <<nowiki />div class="container"> <<nowiki />div class="row"> <<nowiki />di...」)
スマホだと横2列、タブレットサイズ以上だと横３列
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4"><p>Box 12</p></div>
</div>
</div>
