how break 1row into 2row at tablet view (width=767px) in bootstrap

I’m creating wordpress theme using bootstrap.

I have a file with 3 col and it shows 4 post per row, its looking good for laptop view.

The problem is at 767px width. it show one post per row means one post use one row and 4post uses 4rows.

is there anyway in bootstrap that at tablet view 4post show in 2 rows not in 4 rows??? @media queries not handling this

current at 767px–> 4 posts = 4 row

required at 767px–> 4 posts = 2 row

content.php

  <div <?php post_class( 'custom-col col-lg-3 col-xs-3 col-sm-3 col-md-3' ); ?> id="post-<?php the_ID(); ?>">

         <div class="single-post">     
          div class="post-thumb" > 
               <a href="<?php echo esc_url( post_permalink() ); ?>">
               <?php the_post_thumbnail  ( 'large', array(
                  'class' => 'img-responsive' 
                ) ); ?> </a>
         </div>            
        <div class="post-title">
             <h3><a href="<?php echo esc_url( post_permalink() ); ?>">
              <?php the_title(); ?></a></h3>
        </div>
        </div>
        </div>

 <?php $item_number++;
 if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-lg-block"></div>';
 if( $item_number % 1 == 0 ) echo '<div class="clearfix visible-xs-block"></div>';
 if( $item_number % 2 == 0 ) echo '<div class="clearfix visible-sm-block"></div>';
 if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-md-block"></div>'; 
 ?>