调整浏览器大小时，如何优先显示首先显示的列？

Question

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

在我的主页上，我有两列，每行的文本/图片交替显示。 （第一行是文字，第二行是图片），然后是下一行，颠倒过来。

但是，当我在浏览器或移动设备上将大小调整为更小时，也会遵循这种模式，但会让用户感到困惑。当我调整大小超过断点时，有没有办法让我的文本始终显示在图片上方或下方？

喜欢在各个列中添加一个 CSS 类吗？还是它的父容器？

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

p>

hmmmmm 我做的是这个。

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

我把一个特定的类称为逆序。我在 wp-block-columns 和该选择器之间没有放置空格，因此它应该选择具有该名称的所有元素。然后寻找 .wp-block-column:first-child。

我的逻辑错了吗？

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;
  }
}

1. 移动设备上的图文：

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