在具有背景图像的列中进行两列转换的最佳方法是什么？

Question

例如，我想要一个两列的英雄部分，其中第一列是 title/subtitle/action，第二列是图像，但是当响应较小的屏幕尺寸时，而不是制作一个在另一个之上，我希望它们重叠，这样图像现在就在 title/subtitle/action 后面而不是下面。

我在想这样的事情：

<div class="grid grid-cols-2 bg-image">
  <div class="grid-span-2 md:grid-span-1 md:mr-auto">
    // Title
    // Subtitle
    // Action Button
  </div>
</div>

但这会使图像始终位于 div 的顶部，而不是像桌面尺寸那样的列。

Answer 1

您可以通过在到达小屏幕断点时使用图像定位和 z-index 来实现：

<div class="container">
  <div class="div1">Foo</div>
  <div class="div2">Bar</div>
</div>

.container {
  display: flex;
  position: relative;
}
.container > div {
  width: 600px;
  height: 300px;
}
.div1 {
  background-color : #f00;
  z-index: 2;
}
.div2 {
  background-color : #0f0;
  z-index: 1;
}
@media only screen and (max-width: 1200px) {
  .div2 {
    position: absolute;
    right: 0;
  }    
}

https://jsfiddle.net/bhksd1yn/

在具有背景图像的列中进行两列转换的最佳方法是什么？

What would be the best way to have a two column transform in a column with a background image?

css

vue.js

tailwind-css