因此，我有一个图像容器div和一个文本容器div;在768px宽度以上，它们应该并排，稍微重叠（这部分工作）.但当观众在768px下，他们应该flex列，与图像和下面的文字.我已经这样做了在另一个块与类似的卡不重叠，但我有麻烦的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_text-container_img-{{direction}}类。