Html 使用容器流体的重叠列引导

试图建立一个网页，其中我有一半的页面图像和另一半的文字

到目前为止，这就是我所拥有的，我让它工作，当我缩小页面时，文本与照片重叠

.css文件：

.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}

html文件：

<div class="container-fluid">
<div class="row">
    <div class="span6">
        <div class="z-img">
            <img src="...." width="732" height="432">
    </div>
</div>
    <div class="span6  text-center">
        <div class="z-content">
            <div class="well">
                <h2> About Me: </h2>
            </div>
            <div>
                <blockquote>
                   <p>............</p>
                </blockquote>
            </div>
       </div>
   </div>
   </div>

关于我：

---

我想确保当我缩小页面时，比如在手机上，我不希望文本与图像重叠。也可以根据屏幕大小缩小和放大图像，而不是将其作为静态大小？我确实希望它能覆盖一半的页面，尽管我已经弄明白了，我只需要在我的照片标签中添加class=“img responsive”标签

使用

.col-*-*

类来构建网格系统可能会更幸运。