需要同级 div 在较大的断点处并排重叠，并在较小的断点处弯曲列

Question

所以我有一个图像容器 div 和一个文本容器 div；在

768px

宽度之上，它们应该并排，稍微重叠（这部分有效）。但是当观看者位于

768px

下时，他们应该弯曲列，图像在前，文本在下。我已经在另一个具有不重叠的类似卡片的块中完成了此操作，但我在处理该卡片的 flex-direction: 列时遇到了麻烦。它们只是最终位于彼此的顶部（z-index）。这是我的代码：

    <div class="promo-container"> <!-- flex for large, flex column for small -->
        <div class="promo_image-container_img-right promo_image-container rounded-3xl p-5 text-cfcu-supplementary-gray-10 bg-cfcu-supplementary-gray-75">
            <img src="{{$image['url']}}" class="p-5 max-w-80 max-h-52" />
        </div>
        <div class="promo_text-container_img-right promo_text-container rounded-3xl p-5">
            <div class="text-2xl font-bold">{{$title}}</div>
            <div class="my-2">{{$description}}</div>
            <a href="{{$button_url}}"><button id="promotion-cta-button" class="bg-black text-white font-bold p-2 rounded-full">{{$button_text}}</button></a>
        </div>
    </div>

    .promo-container {
        position: relative;
        display: flex;
        align-items: center;
        height: 28rem;
    }

    .promo_text-container_img-left {
        background: white;
        width: 60%;
        z-index: 100;
        margin-left: -35px;
        height: 80%;
        position: relative;   
    }

    .promo_image-container_img-left {
        width: 60%;
        height: 100%;
        z-index: 1;
        display: flex;
        justify-content: center;
    }

    .promo_text-container_img-right {
        background: white;
        width: 53%;
        z-index: 100;
        margin-right: -15px;
        height: 80%;
        position: absolute;   
        left: 0;
    }

    .promo_image-container_img-right {
        width: 53%;
        height: 100%;
        z-index: 1;
        display: flex;
        justify-content: center;
        position: absolute;
        right: 0;
    }
    
    @media screen and (max-width: 769px) {
        .promo-container {
            flex-direction: column;
        }
        .promo_image-container, .promo_text-container {
            width: 100%;
        }
        .promo_text-container {
            position: relative;
        }
    }

在较大的断点上还可以选择将图像放在左侧或右侧，因此有两组

.promo_text-container_img-{{direction}}

类。

Answer 1

我发现，由于我将

position: absolute;

添加到

.promo_image-container_img-right

来反转 div 的顺序，我必须恢复

relative

以便

flex-direction: column;

在小断点处工作：

@media screen and (max-width: 769px) {
    .promo_image-container_img-right {
        position: relative;
    }
}

如果必须的话，请叫我n00b。