css - Have a bootstrap row fill the screen height, but adjust dynamicly on resizing the window -

update: css style:

height: 100vh; 

was causing initial problem below. using specific section of webpage filled screen when 'page-jump' button clicked. there way have section(div class="row")fill screen, adjust contain content when window resized smaller? when using above style, fits screen on window resizing, height stays @ 100vh, content within row adjusted stack vertically, ovefrlows row height.

initial problem:

i trying use flexbox style in css/bootstrap vertically align content within 3 columns, within row.

here js fiddle issue: http://jsfiddle.net/coopwatts/fnh4exxs/

the html this:

<div class="row">   <div class="col-sm-4 col-md-4">     <img></img>     <h2></h2>     <p></p>   </div>   <div class="col-sm-4 col-md-4">     <img></img>     <h2></h2>     <p></p>   </div>   <div class="col-sm-4 col-md-4">     <img></img>     <h2></h2>     <p></p>   </div> </div> 

and css flexbox like:

.row {   display: flex;   align-items: center;   justify-content: center; } 

flexbox works fine aligning content when window minimized down xs, content escapes row , jumbled on place. i'm trying utilize bootstraps grid system things nicely on mobile , laptops issue. doing wrong?

i able solve issue adding following jquery:

$(window).resize(function() { if($(window).width() <= 768) {     $(".customer-options").css("height", "auto"); } else if ($(window).width() > 768) {     $(".customer-options").css("height", "");     $(".customer-options").css("height", "100hv"); } }); 

everything working great, thank you!