Estoy usando bootstrap para dividir las publicaciones de la página de inicio de mi blog en 2 columnas. Para evitar un problema (las publicaciones se muestran mal debido a la altura diferente, vea el ejemplo aquí:

Estoy definiendo la altura del artículo a 350 píxeles (y aquí puedes verlo resuelto:

El problema es que esta solución hace que las publicaciones se muestren una encima de la otra, cuando los visitantes usan una pantalla pequeña (móvil o tabletas pequeñas).

Así que actualmente estoy usando un javascript para evitar esto, pero creo que no es la mejor solución. ¿Sabes si hay un mejor método CSS para obtener este mismo resultado? (Soy novato)

Índice:

 <article class="post col-md-6 main article" id="DeviceScreen">

CSS:

 #namisboobs{height:350px;} #anasboobs{height:auto;}

Encabezamiento:

 <script> var el = document.getElementById('DeviceScreen'); { if ($(window).width() < 960) { el.innerHTML = (('anasboobs')); } else { el.innerHTML = 'namisboobs';} } </script>