如何让内容推送右对齐图像

Question

我正在构建一个左侧带有文本的部分，以及一个绑定到浏览器右侧的背景图像。使用桌面设备时，文本和图像的宽度均为50％左右。

对于桌面设备解决方案，我将其编码为： http://www.bootply.com/xxyOcA9N5n

然而，当我尝试使其响应时出现问题。我的首选目标是内容逐渐将背景图像“推”到右侧（在浏览器的“画布”之外）。在极端情况下，它看起来像这样：图像几乎消失，文本可读。

你能帮我解决一下，如何解决这个问题？

Answer 1

添加另一个col-sm-6并将图像放在100％宽度的位置，以便随着尺寸变小而缩放。您还可以使用media queries来定义各种尺寸的显示方式。

<div class="container-fluid hp-about">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <h2>Company</h2>
                    <p class="large">We are doing this and this and it is
                    awesome because this and that. Yeah and also this and that.
                    And also that.</p>
                    <p><a href="#">More about us »</a></p>
                </div>
                <div class="col-sm-6"><img src=
                "http://i.imgur.com/HGp1ot6.png"></div>
            </div>
        </div>
    </div>