Bootstrap网站在浏览器中看起来不错，但div在移动设备

Question

我使用Bootstrap创建了一个多行，多列的站点。该网站在常规浏览器中看起来很棒，但是当我为移动设备调整大小时，div不对齐，堆叠在一起，内部内容消失，或者div很平坦到你无法看到图像的位置。如何防止在大/中型屏幕中调整div的奇怪大小，但是在小屏幕上按比例堆叠？

这是我的一行：

<div class="row row1">
            <div class="col-xs-12 col-sm-6 col-lg-5 row1-topleft">
                <div class="inside-index">
                    <h2>one header</h2>
                    <p>content</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-7 row1-topright">
                <div class="inside-index-img">
                    <img src="http://placehold.it/900x1200">
                </div>
            </div>
        </div><!-- end  row1 -->

和CSS：

html, body {
    height: 100%;
}
div {
    height: 100%;
}
.row1 {
    height: 120%;
}

这里有一个Fiddle，其中包含整个网站和问题。

Answer 1

如果我理解正确的话，你得到的是： 这就是你想要的：

您正在寻找的解决方案是将图像作为背景并使用css属性background-size:cover来适应列的大小。

代码：https://jsfiddle.net/jkLjnt0d/7/