Wordpress + Bootstrap 3: Every two posts in their own row together.

bootstrap-rows.php

<?php 
      // $the_query = new WP_Query( 'showposts=4' ); 
      $the_query = new WP_query( 
          array(
              'posts_per_page'    =>    4,
              'meta_key' => 'featured_facts',
              'orderby' =>  'meta_value_num date',
              'order' => DESC  
          )
      );
    ?>
    <?php $i = 0; ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); $i++; ?>
      <!-- if $i is odd, output a col-6 tag -->
      <?php if(!($i % 2 == 0)): ?>
        <div class="col-md-6">
          <div class="row blog-posts">
      <?php endif; ?>

      <div class="col-md-6 col-sm-6 col-xs-6 moving-facts">
        <a href="<?php echo get_permalink(); ?>">
          <?php 
            $post_thumbnail_id = get_post_thumbnail_id( $post_id );
            $post_thumbnail = wp_get_attachment_image_src($post_thumbnail_id, 'moving-facts-thumb');

            if ($post_thumbnail[1] == 550) {
              the_post_thumbnail('moving-facts-thumb');
            } else {
              the_post_thumbnail();
            }
          ?>
        <!-- </a> -->
        <!-- <a href="<?php echo get_permalink(); ?>"> -->
          <h4><?php the_title(); ?></h4>
        </a>
        <?php the_content(); ?>
      </div>

      <!-- when $i is even, close the col-6 tag that was opened -->
      <?php if(($i % 2 == 0)): ?>
          </div>
        </div>
      <?php endif; ?>

    <?php endwhile;?>