How to create Wordpress loop with combination of 4 and 2 columns twitter-bootstrap?

Question

I want to display post based on combination of 4 columns (desktop view), 2 columns (mobile view 768px) and 1 columns (mobile view 425px). I found the great code below:

<?php
$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
              $args=array(
                     'post_type' => 'post',
                      'posts_per_page' => 8,
                  'paged' => $paged,
                  'tax_query' => array(
                              array(                
                                  'taxonomy' => 'post_format',
                                  'field' => 'slug',
                                  'terms' => array('post-format-video'),
                                  'operator' => 'IN')
                                  )
                );

              $my_query = null;
              $my_query = new WP_Query($args); ?>

              <?php if( $my_query->have_posts() ) {

                $i = 0;
                while ($my_query->have_posts()) : $my_query->the_post();
              if($i % 4 == 0) { ?> 

              <div class="row">

              <?php
              }
              ?>

                <?php get_template_part( 'template/loop', 'video' ); ?>
                  <?php $i++; 
                  if($i != 0 && $i % 4 == 0) { ?>
                    </div><!--/.row-->
                    <div class="clearfix"></div>

                  <?php
                   } ?>

              <?php endwhile; } wp_reset_query();?>

It's work perfectly on desktop view (4 column) & (1 column 425px) but not in mobile view (2 column 768px). Anyone can please help? Thanks!

Answer 1

I guess I can fix it with css, with the nth-child selector or another method. If you have the link to the page I can look and tell you.