How do I make a grid responsive with variable height in Boostrap?

Question

The inner div boxes can have different heights but I need to be always above, like a vertical-align:top.

I now show this

But need always like this Remeber, in tablet or mobile... responsive boostrap The php code

                <?php
                $args = array( 'post_type' => 'clientes');
                $loop = new WP_Query( $args );
                $i=0;
                if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
                  if ($i%2==0){ $bgcolor='#f3f3f3'; } else {  $bgcolor='#fff'; }
            ?>
                    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 partner" style="background-color: <?php echo $bgcolor; ?>">

                        <img src="<?php echo get_field('logotipo');?>" alt="<?php echo get_the_title();?>"/>
                        <?php if(get_field('proyectos')): ?>
                            <ul>
                            <?php while(has_sub_field('proyectos')): ?>
                                <li>
                                    <p class="nameproject"><?php the_sub_field('nombre_proyecto'); ?></p>
                                    <p><?php the_sub_field('tipologia_proyecto'); ?></p>
                                </li>
                            <?php endwhile; ?>
                            </ul>
                        <?php endif; ?>

                    </div>
            <?php
                  $i++;
                endwhile; endif;
            ?>

Answer 1

The only way I found to do this (without JavaScript) was to place the nth item in the (n % 3) column. You may need to change the order of posts.

// set defaults
$index = 0;
$post_cols = array('', '', '');

// start the loop
while (have_posts()) {
    the_post();

    //store posts in columns array
    ob_start();
    get_template_part('content', get_post_format());
    $post_cols[$index % 3] .= ob_get_contents();
    ob_end_clean();

    $index++;
}// end while

//output column contents
echo '<div class="row">';
foreach ($post_cols as $col) {
    echo '<div class="col-md-4 post-col">'.$col.'</div>';
}
echo '</div>';

You'll also need to make sure to remove the margin-left on the items in the first column.

.post-col:nth-child(3n+3) {
    margin-left:0;
}

Answer 2

In your code you have defined col-xs-12 for mobile screens. If you want the layout to be same for all screen size then define col- xs with less column

Answer 3

if you are trying to create a pinterest style layout .please check out Salvattore & masonary

Also check this thread in stackoverflow . will come useful .