调整浏览器大小时，如何优先显示哪一列

Question

我有一个网站https://nestofthoughts.com/

在我的主页上，我有两列，每行的文字/图片交替显示。(先是文字，后是图片(，然后在下一行反转。

然而，当我在浏览器或移动设备上缩小大小时，这种模式也会出现，但会让用户感到困惑。当我调整大小超过断点时，有没有办法让我的文本总是出现在图片的上方或下方？

比如在各个列中添加一个css类？还是其父容器？

********************************************更新

我做的就是这个。

@media (max-width: 599px) {
.wp-block-getwid-section:nth-child(even) .wp-block-columns.reverse-order .wp-block-column:first-child {
order: 1;
}
}

我设置了一个特定的类，称为反向顺序。我在wp块列和选择器之间没有空格，所以它应该选择所有具有这两个名称的元素。然后查找.wp块列：第一个子.

我的逻辑错了吗？

Answer 1

您的布局解决方案：

1. 手机上的文字图像：

@media (max-width: 599px) {
.single-page-article .wp-block-getwid-section:nth-child(even) .wp-block-columns .wp-block-column:first-child {
order: 1;
}
}

2. 手机上的图像文本：

@media (max-width: 599px) {
.single-page-article .wp-block-getwid-section:nth-child(odd) .wp-block-columns .wp-block-column:first-child {
order: 1;
}
}