Inserting posts on a page using WP Loop. Trying to achieve a grid layout using Bootstrap columns class "col-md-3" for example.
I was able to find useful code but it's missing one part to what I'm trying to achieve.
Basically, when you use the WP Loop to pull and display posts on a page you can put the Bootstrap column class "col-md-43" for each posts. That way each post is in a column and you basically create a grid of posts. Looks great, except that each row has different heights and then you have weird spacing/gaps. 

OK so there are many solutions out there and I liked the one proposed by Zarko Jovic. <https://stackoverflow.com/a/35963572/2243165>

Basically the solution is to put the columns inside a "row" class. Problem solved. 

This works except I'm not sure how to go about it if I have different columns based on the screen size. For example I use "col-xs-12 col-sm-4 col-md-3". Have no idea if it's possible to create a row that adjusts for each of the 3 different column sizes/classes. The code in the link is written to use 4 columns in a row. But when using "col-xs-12 col-sm-4 col-md-3" class the row sometimes has 1 column, sometimes 3, and other times 4 columns per row :(

Here's my code so far without placing the "row" class. 

```
<?php
// Force loop to display defined custom post type 
$args2 = array(
    'post_type' => 'i',
    'author' => get_queried_object_id(), 'showposts' => 100
    );

$editors_pages = new WP_Query($args2);

// The loop
if ($editors_pages->have_posts()) : while ($editors_pages->have_posts()) : $editors_pages->the_post(); ?> 

<div class='col-xs-12 col-sm-4 col-md-3'>
    <div class='author-pages-title'><h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4></div>
</div>

<?php endwhile; else : ?>
    <p class='align-center'>Sorry, no pages posted yet by this user.</p>
<?php endif;
wp_reset_postdata();

?>

```