这种响应性css合成是否只有在css中才能实现？

我有这个布局。

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

我有引导3包括，如果需要的话。我很难使这个包含文本的蓝色背景div在图像下全宽伸展

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

我得到的最接近的方法是制作2个bs网格列，然后首先在列的容器上使用flexbox使它们拉伸到相同的高度，然后在左列上使用flex使内容垂直居中。但这个蓝色背景只在左边，并没有延伸到整个宽度

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

这只能通过使用css实现吗？若我做一列，让蓝色的bg div全宽伸展，我必须绝对地把图像放在右边，但我并没有图像的高度

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

编辑：以下是我目前拥有的一些资料：

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

这是上一节

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

数据延迟=0.3s>

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

这是下一节

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

如果希望图像重叠在另一个图像上，则图像应为位置：绝对。

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

将您的col-sm-6更改为评论下的col-sm-12

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

我已经修改了下面的代码

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

上一节， 第二节{ 背景：绿色； 保证金：0； 填充：0； } 布鲁伯格先生{ 背景色：rgba50、50、200、.5； } 部分主要部分{ 背景色：中交； 保证金：0； 填充：0； } 福莱斯罗先生{ 显示器：flex； 对齐项目：拉伸； 证明内容：中心； 位置：相对；/*添加此*/ 顶部：0；/*添加此*/ 左：0；/*添加此*/ 高度：299px；/*添加此*/ } .flexcolumn{ 显示：阻止；/*更新此*/ 对齐项目：居中； 证明内容：中心； 宽度：100%；/*添加此*/ 页边距顶部：90px；/*添加此*/ } /*添加以下代码*/ .新班级{ 位置：绝对位置； 排名：0； 右：50px； } 蓝精灵{ 宽度：55%； } 这是上一节 标题 益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智

<div class="row flexrow">

  <!-- left column -->
  <div class="col-sm-6 flexcolumn">

    <div class="row bluebg">

      <h2>HEADING</h2>
      <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

    </div>

  </div>

  <!-- right column -->
  <div class="col-sm-6">
    <img src="https://s10.postimg.org/q9ak7h9ah/image.png" class="wow fadeIn img-responsive" data-wow-duration="0.7s"

这是下一节

---

你试过什么？我假设您使用了引导网格系统，它使用浮动。对于这种布局，您需要在img或heading上使用position:absolute如果我在img上使用position:absolute，我会降低图像高度，以使其在正确的列宽上响应成比例，我们无法调试图像，因此为了获得正确的答案，请发布一个重现您描述的问题的工作代码片段，或者你会得到与给定答案类似的猜测。@Yuray img高度是否可以小于标题高度，或者它是否总是更大？它总是更大，高度总是比蓝色背景divit承诺的要大：，但如果你翻开整页，你会看到蓝色背景并没有完全伸展……答案已更新。请检查我已对.flexColumn进行了一些更改。谢谢，尽管这不是我想要的，因为我必须硬编码边距和img高度，我将使用您的解决方案并添加更多断点以实现我的需要。您可以使用%而不是像素值来避免过多断点。