基于屏幕尺寸实现Timber Shopify Theme列的Push/Pull（交换顺序）

云上老周

2026-5-13

解决Timber CSS框架移动端交换grid__item顺序的问题

我明白你想要实现类似Bootstrap push/pull的效果，在移动端交换两个grid__item的显示顺序。Timber框架本身没有内置这类工具类，但我们可以用CSS Flexbox轻松实现这个需求，具体步骤如下：

方法一：利用Flexbox的`order`属性（精准控制版）

Timber的.grid默认是基于浮动布局的，我们可以在移动端断点将其改为Flex布局，然后通过order属性调整子元素的顺序：

步骤1：给元素添加自定义类

为了更精准地控制每个元素的顺序，给两个grid__item加上自定义类：

<div class="grid">
  <div class="grid__item one-half medium-down--one-whole mobile-order-2">1</div>
  <div class="grid__item one-half medium-down--one-whole mobile-order-1">2</div>
</div>

步骤2：添加自定义CSS

针对Timber的medium-down断点（通常对应屏幕宽度≤768px），重写布局并设置顺序：

/* 匹配Timber的medium-down移动端断点 */
@media screen and (max-width: 768px) {
  .grid {
    display: flex;
    flex-direction: column; /* 让子元素垂直堆叠 */
  }
  
  .mobile-order-1 {
    order: 1; /* 移动端优先显示这个元素 */
  }
  
  .mobile-order-2 {
    order: 2; /* 移动端延后显示这个元素 */
  }
}

方法二：无额外类的快速实现（仅适用于两个元素的场景）

如果你的grid容器里只有这两个元素，也可以不用自定义类，直接通过伪类选择器定位：

@media screen and (max-width: 768px) {
  .grid {
    display: flex;
    flex-direction: column;
  }
  
  .grid__item:first-child {
    order: 2;
  }
  
  .grid__item:last-child {
    order: 1;
  }
}