I'm using bootstrap to split my blog's homepage posts into 2 columns. In order to avoid one issue (posts badly displayed due to different height, see example here:

I'm defining the article height to 350 pixels (and here you can see it solved:

The problem is this solution causes posts to be displayed one over the other, when visitors are using a small screen (mobile or small tablets).

So I'm currently using a javascript to avoid this, but I think it's not the best solution. Do you know if there's a better CSS method to obtain this same result? (I'm newbie)

Index:

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

CSS:

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

Header:

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