For example, I would like to have a two column hero section where the first column would be a title/subtitle/action and the second an image, but when going responsive for a smaller screen size, instead of making one on top of another, I would like them to overlap, so that the image is behind now the title/subtitle/action instead of bellow.
I was thinking of something like:
<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>
But that would make the image always on top of the div, instead of a column like on desktop sizes.
CodePudding user response：
You can achieve this by playing with image positionning and z-index when the small screen breakpoint is reached :
<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;
}
}