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

我正在构建一个部分，左侧有一个文本，右侧有一个背景图像。使用桌面设备时，文本和图像的宽度都约为50%

对于桌面设备解决方案，我将其编码如下：

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

---

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

添加另一个col-sm-6，并将图像以100%的宽度放置在其中，以便随着尺寸变小而缩放。您还可以使用定义希望它在各种尺寸下的外观

<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>

单位
我们正在做这个，这个，它是
太棒了，因为这个和那个。是的，还有这个和那个。
还有

添加另一个col-sm-6，并将图像以100%的宽度放置在其中，以便随着尺寸变小而缩放。您还可以使用定义希望它在各种尺寸下的外观

<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>

单位
我们正在做这个，这个，它是
太棒了，因为这个和那个。是的，还有这个和那个。
还有

谢谢，随信附上。同样为了完整起见，它现在可以完美地工作，左div为“col-sm-6 col-xs-9”，另一个为“col-sm-6 col-xs-3”。此外，为了在大型设备上强制映像“拥抱”右侧（这意味着防止容器填充），我添加了：@media（最小宽度：768px）{.col hug right{right:-240px；}}}和overflow-x:hidden on containerhanks，并使用了此选项。同样为了完整起见，它现在可以完美地工作，左div为“col-sm-6 col-xs-9”，另一个为“col-sm-6 col-xs-3”。此外，为了在大型设备上强制图像“拥抱”右侧（这意味着防止容器填充），我添加了：@media（最小宽度：768px）{.col hug right{right:-240px；}}}和overflow-x:hidden on container