Html/bootstrap/bootstrap3/端末サイズ別block設定

スマホだと横2列、タブレットサイズ以上だと横３列

   <div class="container">
       <div class="row">

<div class="col-sm-6 col-md-4"><p>Box 1

<div class="col-sm-6 col-md-4"><p>Box 2

<div class="clearfix visible-sm-block"> <div class="col-sm-6 col-md-4"><p>Box 3

<div class="clearfix visible-md-block"> <div class="col-sm-6 col-md-4"><p>Box 4

<div class="clearfix visible-sm-block"> <div class="col-sm-6 col-md-4"><p>Box 5

<div class="col-sm-6 col-md-4"><p>Box 6

<div class="clearfix visible-sm-block"> <div class="clearfix visible-md-block"> <div class="col-sm-6 col-md-4"><p>Box 7

<div class="col-sm-6 col-md-4"><p>Box 8

<div class="clearfix visible-sm-block"> <div class="col-sm-6 col-md-4"><p>Box 9

<div class="clearfix visible-md-block"> <div class="col-sm-6 col-md-4"><p>Box 10

<div class="clearfix visible-sm-block"> <div class="col-sm-6 col-md-4"><p>Box 11

<div class="col-sm-6 col-md-4"><p>Box 12