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

Question

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

在我的主页上，我有两列，每行在 text/picture 之间交替。 （第一行是文字，第二行是图片）然后是下一行，它是颠倒的。

然而，当我在浏览器或移动设备上将尺寸调整得更小时，也会出现这种模式，但它会让用户感到困惑。有没有办法让我的文字在调整大小超过断点时始终显示在图片上方或下方？

喜欢在各个列中添加 css class？或其父容器？

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

hmmmmm 我就是这么做的。

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

我放了一个特定的 class 叫做倒序。我在 wp-block-columns 和 select 之间没有放置空格，所以它应该 select 所有具有该名称的元素。然后寻找 .wp-block-column:first-child.

我的逻辑错了吗？

Answer 1

您的布局解决方案：

1. Text-image 在手机上：

@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. Image-text 在手机上：

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