使用nth-of-type实现Bootstrap行交替排序问题求助

你遇到的核心问题是选择器的层级定位错误：每个.odd元素都是它的父级.services-content的第一个子元素，所以.odd:nth-of-type(odd)会匹配所有的.odd（因为每个都是各自父容器的第1个元素，属于奇数位），自然达不到隔行调换的效果。

下面给你两种实用解决方案，按需选择：

方案1：纯CSS实现（无需修改PHP循环） #

我们需要先定位到隔行的.jumbotron容器，再调整它内部的列顺序。因为所有.jumbotron都在.alternate父容器下，可以用:nth-child()选择器选中偶数位（或奇数位）的容器，然后反转flex布局的顺序：

/* 选中第2、4、6...个jumbotron容器，反转它里面的row列顺序 */
.alternate .jumbotron:nth-child(even) .services-content {
  flex-direction: row-reverse;
}

如果不想用整体反转，也可以单独设置每个列的order属性：

/* 偶数位jumbotron里的内容列放到后面，图片列放到前面 */
.alternate .jumbotron:nth-child(even) .odd {
  order: 2;
}
.alternate .jumbotron:nth-child(even) .even {
  order: 1;
}

方案2：结合WP循环的PHP方案（更简洁直观） #

利用Bootstrap自带的flex-row-reverse类，在WP循环中判断当前项的索引，给对应的.services-content动态添加类，这样连额外CSS都不用写：

<?php $item_index = 0; ?>
<div class="alternate">
  <?php // 替换成你的WP循环逻辑，比如自定义字段循环或文章循环 ?>
  <?php while (your_loop_condition()) : $item_index++; ?>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <div class="services-content row <?php echo ($item_index % 2 === 0) ? 'flex-row-reverse' : ''; ?>">
          <div class="col-8"><?php echo $content; ?></div>
          <div class="col-4"><img src="<?php echo $image; ?>" /></div>
        </div>
      </div>
    </div>
  <?php endwhile; ?>
</div>

这个方案的优势是逻辑清晰，直接在循环中控制每行的布局方向，依赖Bootstrap原生类也更稳定。

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