I am Creating a Multi row , 2 Columns blog Post like this

Post #1   |   Post #4
Post #2   |   Post #5
Post #3   |   Post #6

I have found some post useful

https://digwp.com/2010/03/wordpress-post-content-multiple-columns/

Based on the post I have Created Code as follows

<?php

// Some sample styles for the images
echo "<style type='text/css'>
div#left-column {
    width: 150px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 150px;
    float: left;
    clear: none;
    }
</style>n";

?>


<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">
           <?php if (have_posts()) : 
           while(have_posts()) : 
           $i++; ?>

           <?php if(($i % 2) !== 0) :?>

<div id="left-column" class="col-xs-6">
           <?php $wp_query->next_post();the_excerpt();?>
           </div>

<div id="right-column" class="col-xs-6">

           <?php else : the_post(); the_excerpt();?>
</div>                

<?php endif; endwhile; else: ?>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>
</div>
</div>

But this Code giving me Output like

Either it is posting odd or even posts , and in distorted manner …I Tried lot of things , But not able to get alternate post in horizontal direction , Either i am getting completely vertical or hoirizontal . Can anyone suggest what I am msssing , Any suggestion will be helpful