how to use wordpress loop with grid system bootstrap?

EDITED ANSWER

I believe this is what you are looking for. This loops through all the posts you have and then sorts them the way your sketch looks.

<div class='container'>
    <?php
       $args = array(
           'post_type' => 'post' // Get only posts
       );

       $the_query = new WP_Query ( $args ); // build query

       $count = $the_query->post_count; // Check number of posts

   <style>
       .row:nth-child(even) .col-5:nth-child(even) { /* Select every even row and and even post */
           background: #ddd;
       }

       .row:nth-child(odd) .col-5:nth-child(odd) { /*  Select every odd row and odd post*/
           background: #ddd;
       }
   </style>
       <?php
           while ( $the_query -> have_posts() ) : $the_query -> the_post();
               $post_index = $the_query->current_post + 1; // $current_post = gets the post index in loop

               if ( $post_index % 2 != 0 ) { // Open div if post is odd
                    echo '<div class="row" style="border: 2px solid red; padding: 20px; margin:30px;">';
               }

               if ( $post_index % 2 != 0) { // If post is odd then give one class
       ?>                
                   <div class="col-xs-5 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php
               } else {
          ?>
                   <div class="col-xs-5 col-xs-push-2 <?php echo "post_$post_index" ?>" style="border: 1px solid green;">
                       <h2><?php the_title(); ?></h2>
                       <p><?php the_excerpt(); ?></p>
                   </div>
          <?php } // End if ( $post_index % 2 != 0)

              if ( $post_index % 2 == 0 ) { // Close div if post is even
                  echo "</div>";
              }                      

       endwhile;
       wp_reset_postdata();
   ?>


        </div>
        <!-- /.container -->

ORIGINAL ANSWER

This is the html you're looking for. Just change the class names to suit your needs. Since it is WordPress loop you have to do if else statements for when to start a new row and when to have a different color for the background.

.row {
  border: 2px solid red;
  padding: 10px 20px;
  margin: 30px 0;
}

.col-xs-5 {
  border: 1px solid green;
  height: 100px;
}

.gray-bg {
  background: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
<div class="row">
  <div class="col-xs-5"></div>
    <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
      <div class="col-xs-5 col-xs-push-2"></div>
</div>
<div class="row">
    <div class="col-xs-5"></div>
      <div class="col-xs-5 col-xs-push-2 gray-bg"></div>
</div>
<div class="row">
    <div class="col-xs-5 gray-bg"></div>
    <div class="col-xs-5 col-xs-push-2"></div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>