html - 修复响应式标题中响应式图像在文本旁边的位置

Question

这样做的想法是拥有一个响应式标题，其中包含文本和图像元素，它们位于固定的背景图像上。 我试着用 Bootstrap 列来做到这一点，它在桌面上工作，以我想要的方式出现。然而，在较小的设备上， Bootstrap 媒体查询完全按照它们应该做的去做，并将列分解为显示在彼此下方。 我对此没有想法。我知道我需要以某种方式修复图像元素以始终保持在容器的底端，但由于整个事物都是响应式的，所以我不知道如何完成它。

这是我目前所拥有的，但这不是解决方案。我很感激任何建议。

  <section class="section swatch-black section-text-shadow section-inner-shadow">
    <div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
    <div class="container">
      <div class="row">
        <div class="col-md-6 text-left element-normal-top element-normal-bottom">
            <h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
              <strong>More Text </strong> </h1>
            <p class="lead"> Even more text </p>
          <a href="someurl.html" class="scroll-to-id btn btn-link btn-lg element-no-top element-normal-bottom"> learn more </a>
          <a href="someurl.html" class="scroll-to-id btn btn-link btn-lg element-no-top element-normal-bottom"> contact us </a> </div>
          <div class="col-md-6 text-right">
          <img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
          </div>
      </div>
    </div>
  </section>

Answer 1

您可以设置自己的栏目结构。这是我为您快速制作的示例: http://jsfiddle.net/97wswqvr/

这显然需要更多工作，具体取决于您的标题文本/按钮等的其余部分......但它是一个很好的起点

html

<header>
    <div class='content col col-1-2'>
        <div>
            text text text
        </div>
        <div>
            text text text
        </div>
        <div>
            text text text
        </div>
    </div>
    <div class='col col-1-2 img'>
        <img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
    </div>
</header>

CSS

html,body {
    margin: 0;

}
header {
    background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
    text-align: center;
}
.content {
    color: white;
    padding: 40px 0;
}
.col {
    display: inline-block;
    vertical-align: middle;
}
.col-1-2 {
    width: 45%;
}
.img {
}
img {
    width: 70%;
}