Two-column post display on index with Bootstrap in Wordpress - php

Question

Currently, I'm attempting to have a two-columned post display layout on my index page, but unfortunately, none of my tries seem to work. My idea is to have them shown like this:
Article one Article two
Article three Article four
Article five Article six
Instead, however, they're shown like this:
Article one
Article twoArticle three
And so forth. In my content.php file, the following is the code I have:
<?php
/**
* #package dazzling
*/
?>
<div class="row"> <div class="col-sm-12 col-md-6">
<div class="thumbnail" style="padding: 0px;">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="caption"><header class="entry-header page-header">
<h3><?php the_title(); ?> <small style="color: inherit;"><li class="glyphicon glyphicon-new-window"></li></small></h3>
<?php if ( 'post' == get_post_type() ) : ?>
<small class="entry-meta">
<?php dazzling_posted_on(); ?><?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
<span class="comments-link"><li class="glyphicon glyphicon-comment"></li> <?php comments_popup_link( __( 'Leave a comment', 'dazzling' ), __( '1 Comment', 'dazzling' ), __( '% Comments', 'dazzling' ) ); ?></span>
<?php endif; ?>
<?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
<?php
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'dazzling' ) );
if ( $categories_list && dazzling_categorized_blog() ) :
?>
<span class="cat-links"><li class="glyphicon glyphicon-folder-open"></li>
<?php printf( __( ' %1$s', 'dazzling' ), $categories_list ); ?>
</span>
<?php endif; // End if categories ?>
<?php endif; // End if 'post' == get_post_type() ?>
<?php edit_post_link( __( 'Edit', 'dazzling' ), '<li class="glyphicon glyphicon-pencil"></li> <span class="edit-link">', '</span>' ); ?>
</small><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<?php the_excerpt(); ?>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
</div><!-- .entry-summary -->
<?php else : ?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" style="float: left; margin-right: 10px;" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'medium', array( 'class' => 'img-thumbnail' )); ?>
</a>
<div class="caption">
<?php the_excerpt(); ?>
</div>
<?php else : ?>
<?php the_excerpt(); ?>
<?php endif; ?>
<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">'.__( 'Pages:', 'dazzling' ),
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => '%',
'echo' => 1
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>
<br>
</article></div></div></div>
<!-- #post-## -->
Could you all please explain if I'm doing anything wrong here? Thank you!

Answer 1

The easiest solution would probably be a CSS approach. If you assign a class to each post that is printed on the page, you could then float half to the right, and half to the left. Here is an example:
Sample HTML
<div class="wrapper">
<div class="post">Sample Post 1 Content</div>
<div class="post">Sample Post 2 Content</div>
<div class="post">Sample Post 3 Content</div>
<div class="post">Sample Post 4 Content</div>
<div class="post">Sample Post 5 Content</div>
<div class="post">Sample Post 6 Content</div>
</div>
Corresponding CSS
.post:nth-child(odd) {
float:left;
width:50%;
}
.post:nth-child(even) {
float: right;
width:50%;
}
Here is a demo where you can see this approach in action.