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

Posted 2023-03-06

【中文标题】调整浏览器大小时，如何优先显示首先显示的列？

【英文标题】：how do i prioritize which column to show up first when resizing my browser?

【发布时间】：2021-01-12 08:06:29

【问题描述】：

我有一个网站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。

我的逻辑错了吗？

【问题讨论】：

是的，这是一个常见问题。当我使用页面构建器时，他们通常有一个行选项，如“反转设备顺序”来解决问题。但如果 OceanWP 不支持，我可以为您编写自定义 CSS 解决方案。

啊，谢谢你的提议！我目前正在调试我的......希望它能够揭示出什么问题

【参考方案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;
  

移动设备上的图文：

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

【讨论】：

你能看看我的编辑吗？您的代码确实有效，但它选择了太多东西并稍微改变了我的其他画廊。我稍微修改了你的代码，但它似乎不起作用。不知道为什么

嗯？我不确定你是什么意思。当我检查元素时，我看到了逆序类。是否可以让您的代码仅在我的主页上运行？我想通过添加一个特定的类，反向顺序，它只存在于主页上，它可以做到这一点

` 我不确定你的意思。` - 你的 css 代码在页面上不存在。我不知道这可以如何解释）））

您的代码完美运行！是我的其他一些代码影响了它。感谢您的解决方案！这真的很有帮助，我必须研究一些 CSS 选择器导致您的代码！感谢您的帮助，并将您的答案标记为已选择。