user3078100 user3078100 - 7 months ago 30
HTML Question

Creating order in columns

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:

enter image description here

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
<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>