Creating order in columns

Question

I'm using the col-md-6 class in bootstrap to arrange my content into two 50% columns.

Here is a demonstration of how it looks and how I want it to look. The one on the left is how it looks and the one on the right is how I want it to look:

The titles seem to align fine, but the rest of the content does not.

Also, for some reason, the third title is lagging on the bottom instead of aligning to the fourth title (I have no idea why).

Code:

<div class="container">
<div class="row">
    <?php

    while ($query->have_posts())
    {
        $query->the_post();

        ?>

        <div class="col-md-6">

            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
    }
    ?>

</div>
</div>

Answer 1

<div class="container">
    <?php
    $i=0;
    while ($query->have_posts())
    {
        if($i%2==0)
            echo '<div class="row">';
        $query->the_post();

        ?>

        <div class="col-md-6" >
           <div style="height:600px">
            <h2><a href="<?php the_permalink(); ?>" align="middle"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>">
                <?php

                if ( has_post_thumbnail() ) {
                    echo '<p>';
                    the_post_thumbnail("small");
                    echo '</p>';
                }
            ?>
            </a>
            <p><br /><?php the_excerpt(); ?><p>
            </div>
            <div class="alert alert-dismissible alert-info">
                <h3>Free trial available?</h3>
                <p><?php the_field('free'); ?></p>
            </div>

        </div>

        <?php
        if($i%2!=0)
            echo '</div>';
        $i++;
    }
    ?>

</div>

Answer 2

Do it like this:

/* CSS used here will be applied after bootstrap.css */
.content1{
  background-color:red;
}

.content2{
  background-color:blue;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
​<div class="container">
<div class="row">
 <div class="col-md-6 content1">
 <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 
<div class="col-md-6 content2">
  <h1> CONTENT</h1><h1>
   <p>xxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxx
     xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div> 

</div>
</div>