移动端调整WordPress模板列顺序的技术求助

针对你的需求，这里提供两种可行方案，无需复杂修改即可实现目标：

方案一：纯CSS修改（无需改动HTML，适合新手） #

将以下CSS代码添加到WordPress后台的「外观 → 自定义 → 额外CSS」中：

/* 移动端（<768px）调整列顺序 */
@media (max-width: 767px) {
  #top-2 .row {
    flex-direction: column;
  }
  #top-2 .row > div:nth-child(3) {
    order: 4;
  }
  #top-2 .row > div:nth-child(4) {
    order: 3;
  }
}

原理：通过媒体查询针对移动端屏幕，利用Flexbox的order属性调换第三列（文本区块）和第四列（图片区块）的显示顺序，桌面端保持原有布局不受影响。

方案二：修改HTML（利用Bootstrap内置类） #

如果你能访问区块的HTML代码，可直接修改第三、第四列的class属性：

1. 找到第三个文本列的代码，添加order-4 order-md-3到class中：

<div data-type="column" class="col-xs-12 col-sm-4 flexcol col-padding col-padding-small-xs inverted col-md-6 bg-color-black order-4 order-md-3">

2. 找到第四个图片列的代码，添加order-3 order-md-4到class中：

<div data-type="column" class="col-xs-12 col-sm-4 flexcol bg-color-white col-md-6 order-3 order-md-4">

原理：Bootstrap的order-*类用于控制Flex容器内元素的顺序，order-3/4是移动端的默认顺序，order-md-3/4确保桌面端（≥768px）保持原有的[IMAGE][TEXT][TEXT][IMAGE]布局。

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