在英雄形象下面删除内容

Question

我正在尝试创建一个自举网站，我需要做的是让内容下降到我拥有的英雄图像，如果屏幕变小。英雄形象只是我创建的DIV，它使用封面作为背景。我已经尝试将我的列设置为12以获得最小的屏幕尺寸，但它仍然只是将其推到我的英雄图像之上。如何让我的内容按下图像下方？

示例：http://www.bootply.com/aF7D9RDMqr

<div class="fill-screen container-fluid" style="height: 400px;">
  <div class="row">
    <div class="col-xs-12 col-sm-1 col-sm-offset-2" style="margin-top: 30px;"><img alt="Logo" src="http://placehold.it/184x18"></div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-sm-offset-2">
      <h1>A new movement</h1><button class="btn btn-default" type="button">Default</button> <button class="btn btn-default" type="button">Default</button>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula condimentum purus. Nunc vehicula lorem lacinia efficitur commodo. Aliquam tempor elit eget dui faucibus, non euismod metus rhoncus. In sed ipsum id dolor tincidunt euismod. Ut sit amet ex at tortor molestie malesuada.</p>
    </div>
  </div>
</div>

我希望它看起来如何：

Answer 1

我在此处升级了您的代码：codepen

我需要做的是将背景放在没有孩子的div中，然后将容器置于绝对位置以将其放在背景上，然后将相对位置放置在小屏幕上。如果你使用Bootstrap alpha 4，你可以使用mixin更轻松地完成它。

.container-fluid {
  position: absolute;
  top: 0;
}
@media only screen and (max-width : 767px) {
  .container-fluid {
    position: relative;
  }
}