Displaying Wordpress posts in 2 columns using Bootstrap

Question

I use bootstrap, and I would like to display my Wordpress posts in two columns on my index.php page. I show only the_permalink of my posts, and I would like to have them in horizontaly order. When the page is loaded from xs screen, I'd like to have the posts in one column, on top of each other. I tried many different things, but I couldn't get a proper php code. I started again from scratch, Here is the code I have for now:

 <?php if (have_posts()): ?> <div class="container"> <?php while(have_posts()): the_post(); ?> <div class="row"> <div id="post_title_overview_page"> <div class="col-lg-12 col-md-12 col-xs-12"> <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a> </div> </div> </div> <?php endwhile; ?> </div> <?php else: ?> <div class="row"> <div class="col-xs-12"> <p>no result</p> </div> </div> <?php endif; ?> 

I would really appreciate your help! Many thanks!

Answer 1

The class that you are using is not correct. Use the following

<div class="col-lg-6 col-md-6 col-xs-12">
        <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a>
      </div>

col-lg-* is used for larger screens

col-md-* is used for medium screens

col-xs-* is used for small screens

Since you want two div side by side on large devices so lg-6 is used and on small you only want one div so xs-12 is used