内容突破bootstrap行

Question

使用bootstrap，行内的内容会突破到上面和下面的内容。如何保护内容以便样式规则适用？

HTML

<div class="row home">
  <div class="hero-unit">
    <div class="container">
      <div class="container hero-header">
        <h2>Good lorem catchphrase, here</h2>
        <p>This text should sit under the header above, but in mobile, it and the header and buttons within this row should be centered. </p>
        <button type="button" class="btn btn-ghost pull-left">contact us</button>
        <button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
      </div>
    </div>
    <div class="col-lg-6">
    </div>
  </div>

  <div class="row hero-family">
    <div class="col-sm-12 col-md-6 col-lg-12">
      <div class="container blurb">
        <h1 class="header">All for the family</h1>
        <p>This is just more filler text for this space in place of what will eventually go here. This should be centered above the people and button below, while the content above should not flow into this space when downsizing.The image below should maintain
          its position at the bottom of the row and not come up when resizing either.</button>
      </div>
    </div>
  </div>
  <div class="row hero-family">
    <div class="family-image"></div>
  </div>

  <div class="row we-can-help">
    <div class="container">
      <h1>We are here</h1>
      <p>This content shouldn't break out of its row either, but still manages to. Not a good thing!</p>
    </div>
  </div>

JSFIDDLE：LINK

这就是应该的样子

低于992px，然后开始看起来像这样： 请注意，图像远离其行的底部以及行之间的内容冲突。