我正在我的网站上进行媒体查询。我想设置第一张图像以及我的文本和按钮。但它不起作用

Question

这是原始尺寸的卡片。在此处输入图像描述 如果宽度是 464px （媒体查询），我想要这样的内容 在此输入图片描述 当我尝试不同的方法时，它不起作用。

这是我的代码：

使用 Bing 壁纸拉近世界距离 下载免费应用程序，每天享受新背景的壮丽景色。 获取必应壁纸 `我尝试使用 flex: 列和内容甚至边距等......`

Answer 1

看起来您忘记包含代码，但根据您的描述，您可以通过添加以下 CSS 来实现第二张图片中的布局。

@media only screen and (min-width: 464px){
    .container {
        display: flex;
        flex-direction: column;
        gap: 30px; /* Adds space between items */
    }
    .text-container {
        order: 1; /* Moves this element to appear after the image */
    }
}

这应该会让您更接近您想要的布局。如果您需要进一步调整，请告诉我