WordPress移动端调整页面图片顺序：将图片置于文字上方

嘿，别担心！新手接触WordPress可视化编辑器遇到响应式布局问题太正常了，你的思路完全找对了——Visual Composer的Push/Pull功能就是专门搞定这种“桌面端保持原有顺序，移动端调整模块位置”的需求，我给你一步步拆解怎么操作：

第一步：确认你的基础布局结构 #

首先得确保你是用Visual Composer的**Row（行）**来拆分图片和文字模块的，比如桌面端是一行分成两列：左边放图片、右边放文字（或者反过来，根据你的现有布局来），这个是基础前提。

第二步：用Push/Pull调整移动端顺序 #

假设你桌面端是「图片列 + 文字列」各占6格（12格布局是Visual Composer的默认设置）：

• 先选中文字所在的列，找到右侧设置面板里的「Responsive Options（响应式选项）」，这里会分Desktop、Tablet、Mobile三个尺寸的设置项。
• 针对Mobile（移动端）：给文字列设置Push 6——这个操作会让文字在移动端被“推”到右侧，腾出左边的位置。
• 接着选中图片所在的列，同样在Mobile维度设置Pull 6——这会把图片“拉”到左侧，也就是文字的上方位置。

如果你的列不是6:6的比例（比如图片4格、文字8格），那Push和Pull的数值就对应对方列的宽度数值就行，比如给文字列设Push 4，图片列设Pull 8。

第三步：预览验证 #

设置完后点击编辑器的预览按钮，切换到移动端视图，就能看到图片已经跑到文字上方，而桌面端的布局完全和之前一样啦。

备用方案：自定义CSS实现 #

如果你的Visual Composer版本没有直接的Push/Pull选项，也可以用CSS来搞定：

1. 给图片模块添加一个自定义CSS类，比如mobile-priority-image（在模块设置的「Custom CSS」里填）。
2. 打开主题的「自定义CSS」面板（一般在WordPress后台的「外观」→「自定义」里），添加这段代码：

@media (max-width: 767px) {
  .mobile-priority-image {
    order: -1;
  }
}

这段代码利用Flex布局的order属性，让移动端下这个图片模块的排列优先级提前，同样能实现图片在文字上方的效果。

内容的提问来源于stack exchange，提问作者Ghaith