Buenas, hace poco escribí una pregunta para poder organizar divs con diferentes alturas en columnas. Resulto ser una pregunta ya respondida: **¿Como puedo crear columnas desorganizadas en bootstrap?** El caso es que lo estoy probando y me funciona cuando lo trabajo aquí o fuera de la web. Cuando lo llevo a la página web hay algún error que hace que no funcione correctamente. Imagino que será algún problema con algún otro js. A veces, no siempre se me montan unos div con otros, como si no reconociera el heigth del div y al estar en position:absolute, se solapan. Para verlo, en el caso de que se vea correctamente hay que **actualizar con ctrl+F5**. Cuando redimensiono la ventana del explorador(crhome) se corrige el error y se reorganiza. La página es: https://www.joaquinlois.com/organos/restauracion-organos-historicos/ Cuando queda carga mal se ve así: [![introducir la descripción de la imagen aquí][1]][1] Debería de verse así: [![introducir la descripción de la imagen aquí][2]][2] He estado trabajando el código aquí y claro, al no tener otros js se ve correctamente, he creado un pen en codepen y le he añadido librerías que tengo cargadas en la web, pero nada, no doy con el error. Dejo el código aquí, aunque este no tiene problemas. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> article.featured-organo{ margin-bottom:30px; display:block; text-align:center;} article.featured-organo img{ width:90%; margin:0px auto;} h1{text-align:center; margin-bottom:100px} h4{font-size:14px; color:#999; font-style:italic; margin-bottom:10px;} .content-features-organos{max-width:1200px; margin:0px auto;} <!-- language: lang-html --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://www.joaquinlois.com/wp-content/themes/joaquinlois/css/joaquinlois.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Masonry</h1> <div class="grid content-features-organos"> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano<br> de Tordesillas<br>.<br>.<br>.</h3> <h4>Nombre <br>del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_sanpedro_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de <br>Salamanca</h3> <h4>Nombre del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/05/salamanca_detalles_01-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano del <br>Espinar</h3> <h4>Nombre del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_espinar_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de Zuera<br>.<br>.<br>.</h3> <h4>Nombre del templos</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_zuera_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de <br>Cordoba</h3> <h4>Nombre del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/cordoba_general_II-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de <br>La Seca</h3> <h4>Nombre <br> del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/laseca_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano del Espinar</h3> <h4>Nombre del templos</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_espinar_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de Fontiveros</h3> <h4>Nombre del templo</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_fontiveros_general-200x200.jpg" /> </article> <article class="grid-item featured-organo col-sm-3"> <hgroup> <h3>Órgano de ...</h3> <h4>Nombre del <br> templos</h4> </hgroup> <img src="https://www.joaquinlois.com/wp-content/uploads/2015/06/organo_fontiveros_general-200x200.jpg" /> </article> <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script> <script> $('.grid').masonry({ // options itemSelector: '.grid-item' }); </script> <!-- end snippet --> Adjunto también el código que tengo en la página, por si pudiera ser de ayuda, esta hecha en wordpress. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <section id="lista-organos"> <div class="col-md-12"> <div class="col-md-6"> <?php $recent = new WP_Query("page_id=180"); while($recent->have_posts()) : $recent->the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> </div> <div class="col-md-6"> <?php $recent = new WP_Query("page_id=1006"); while($recent->have_posts()) : $recent->the_post(); ?> <div class="grid content-features-organos"> <?php if( have_rows('organ_repeater') ): ?> <?php while( have_rows('organ_repeater') ): the_row(); $image = get_sub_field('imagen_repeater'); $size = 'thumbnail'; // (thumbnail, medium, large, full or custom size) ?> <?php if(get_sub_field('new_restored_option', 'option') == 'restaurado') : ?> <article class="col-xs-6 col-sm-4 col-lg-3 featured-organo grid-item"> <div class="featured-organo-content"> <?php if(get_sub_field('title_repeater')): ?><h3><a href="<?php the_sub_field('link_repeater'); ?>"><span>órgano</span> <?php the_sub_field('title_repeater'); ?></a></h3><?php endif; ?> <?php if(get_sub_field('templo_repeater')): ?><h4> <?php the_sub_field('templo_repeater'); ?></h4><?php endif; ?> <?php if(get_sub_field('date_repeater')): ?><p class="fecha-organo"> (<?php the_sub_field('date_repeater'); ?>)</p><?php endif; ?> <a class="imagen" href="<?php the_sub_field('link_repeater'); ?>"> <img title="Restauración del órgano de <?php the_sub_field('title_repeater'); ?>" src="<?php echo $image['sizes']['thumbnail'] ?>" alt="<?php if(ICL_LANGUAGE_CODE == 'es'): ?> Restauración de Órganos Históricos <?php elseif(ICL_LANGUAGE_CODE == 'en'): ?> Historic Pipe Organs Restauration <?php elseif(ICL_LANGUAGE_CODE == 'de'): ?> Historic Pipe Organs Restauration <?php elseif(ICL_LANGUAGE_CODE == 'pt'): ?> Restauro de Orgãos Historicos<?php endif; ?>"> </a> </div> </article> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> </div> <?php endwhile; ?> <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script> <script> $('.grid').masonry({ // options itemSelector: '.grid-item'}); </script> </div> </section><!-- #post-## --> <!-- end snippet --> He probado ha desactivar todos los plugins y tampoco Bueno, creo que esto es todo, ando medio loko con esta chorrada. Gracias de antemano. [1]: https://i.sstatic.net/5WSWE.jpg [2]: https://i.sstatic.net/lCrXx.jpg