Display wordpress loop in two columns using bootstrap grid - php

Question

Hi I need to modify my WP theme to make it show one post in two columns.
like this :
but when I add a second post it gets like this :
This is current code of the blog section custom php file, I can do a wipeout and forget this code and start from scratch, i've tried but I cannot make it work... Really appreciate any hint/ suggestion...I'm not a specialist, i'm learning
<div class="container content">
<div class="row blog-page">
<div class="col-md-9 md-margin-bottom-40">
<!--Blog Post-->
<div class="row blog blog-medium margin-bottom-40">
<?php // Display blog posts on any page # http://m0n.co/l
$category_id = get_cat_ID('Blog');
$catquery = new WP_Query( 'cat=' .$category_id. '&posts_per_page=5' . '&paged='.$paged );
while ($catquery->have_posts()) : $catquery->the_post(); ?>
<div class="col-md-5">
<?php
the_post_thumbnail('medium') ;
?>
</div>
<div class="col-md-7">
<h2><?php the_title(); ?></h2>
<?php the_excerpt();
?>
<?php endwhile; ?>
<?php if ($paged > 1) { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts »'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
</nav>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<hr class="margin-bottom-40">
<!--End Blog Post-->
<!--End Blog Post-->
</div>
<!-- Right Sidebar -->
<?php get_sidebar() ; ?>
<!-- End Right Sidebar -->
</div><!--/row-->
</div><!--/container-->
thank you in advance for your help

Answer 1

Please replace this code with your code and display output like image.
<div class="container content">
<div class="row blog-page">
<div class="col-md-12 md-margin-bottom-40">
<!--Blog Post-->
<div class="row blog blog-medium margin-bottom-40">
<?php
// Display blog posts on any page # http://m0n.co/l
$category_id = get_cat_ID('Blog');
$catquery = new WP_Query('cat=' . $category_id . '&posts_per_page=5' . '&paged=' . $paged);
while ($catquery->have_posts()) : $catquery->the_post();
?>
<div class="col-md-2">
<?php
the_post_thumbnail('medium');
?>
</div>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_excerpt();
?>
</div>
<?php endwhile; ?>
<?php if ($paged > 1) { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
<div class="next"><?php previous_posts_link('Newer Posts »'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link('« Previous Posts'); ?></div>
</nav>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<hr class="margin-bottom-40">
<!--End Blog Post-->
<!--End Blog Post-->
</div>
<!-- Right Sidebar -->
<?php get_sidebar(); ?>
<!-- End Right Sidebar -->
Please check and let me know.