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

スマホだと横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>