Динамическая анимация с помощью gsap при использовании медиазапроса при загрузке

Question

Я сейчас использую бутстрап col-md-4 а также col-xs-12 сделать мою маленькую веб-страницу динамичной с разной шириной окна, как в следующем HTML:

<div class='features'>
  <div class=' blog col-sm-4 col-xs-12'>
    <div class='thumbnail '>
       <img <--!content inside--!>/>
       <h2><--!content inside--!></h2>
       <p><--!content inside--!></p>
    </div>
  </div>
</div>
<--!three of them in total--!>

Чтобы немного придумать, я пытаюсь добавить tweenmax, показывая <img> а также <h2> сначала и делая <img> исчезают, <p> появляются, когда моя мышь входит. The problem is that whenever the three .thumbnail get into one block(that is, when window width is wider than 768px), the text would be longer than the frame of its parent.

To make it up, I gave it some conditions to change the height of .thumbnail, but none of them can really make the height to change accordingly to window resizing.

here javascript part:

//thumbnail//
var height = $('.thumbnail').height()/1.5;
var textheight =($('.thumbnail p').height()+$('.thumbnail h2').height())*2;
var imgheight = $('.thumbnail img').height();

$(".thumbnail").mouseenter(function(){

if(imgheight<textheight){
   height = textheight*1.5;
} else {height = $('.thumbnail').height()/1.5;}

TweenMax.fromTo(this, 0.6,{y:0}, {y:'-=20px', ease: Power4.easeInOut, repeat:1, yoyo:true} );  
$(this).addClass('active-thumbnail-hover').fadeIn(600);

if($('.thumbnail').height()<textheight){
  TweenMax.to($(this), 0.6, {height:textheight});
} else {height = $('.thumbnail img').height()/1.6;}

TweenMax.to($(this).children('h2'), 0.8,{y:-height, ease:Power1.easeInOut,color:'black', background:'none'});

TweenMax.fromTo($(this).children('img'), 0.8, {opacity:1}, {opacity:0, ease: Power1.easeIn});

TweenMax.fromTo($(this).children('p'),0.8,{display:'none'},{display:'block',ease:Power1.easeIn});
});

$(".thumbnail").mouseleave(function(){
 if(imgheight<textheight){
   height = $('.thumbnail').height()*2.5;
   TweenMax.to($(this), 0.6, {height:$('.thumbnail').children('img').height()*1.05});
 } else {height = $('.thumbnail img').height()/1.6;}

TweenMax.to($(this).children('h2'), 0.8,{y:0, ease:Power1.easeInOut, background:'rgba(215,255,210, 0.5)'});

TweenMax.fromTo($(this).children('p'),0.3,{display:'block'}, {display:'none',ease:Power1.easeIn});


TweenMax.fromTo($(this).children('img'), 0.8, {opacity:0}, {opacity:1, ease: Power1.easeIn});

});

here's how is it like in my JSBin, sorry it's a bit messy!