Php 交换列-第一个子项最后一个子项-引导

我正在尝试改变一些行的布局。它们应该是这样的：

<div class="container benefit-container">
    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>
</div>

它在引导中，每一行都有一个循环输出。输出如下所示：

<div class="container benefit-container">
    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>
</div>

但是为了交替行，我想我需要使用第n个子元素奇偶CSS

但我不知道如何实施它。它几乎需要一个if语句，比如，若行是奇数，那个么第一个子项为50%，最后一个子项为50%

这甚至可以用CSS单独完成吗？也许我需要内联编写css并以某种方式使用php

---

任何帮助都将不胜感激。谢谢你的关注

正如我在上面的评论中所说，最好只使用CSS来完成此任务，使用

odd

CSS伪选择器：

.benefit-row:nth-child(odd) div:first-child {
    left: 50%;
}
.benefit-row:nth-child(odd) div:last-child {
    right: 50%;
}

这会产生如下结果：

<div class="container benefit-container">
    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>

    <div class="row benefit-row">

        <div class="col-md-6 benefit-text">
            <h4>...</h4>
            <p>...</p>
            <a href="#">...</a>          
        </div>

        <div class="col-md-6 benefit-image">
            <img src="#" />
        </div>

    </div>
</div>

而不是使用PHP和添加一些奇数和偶数

<style type="text/css">
.benefit-row.alt div:first-child {
  left: 50%;
}
.benefit-row.alt div:last-child {
  right: 50%;
}
</style>
<?php $k = 1; ?>
<div class="container">
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
    <div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
        <div class="col-6 bg-primary">1</div>
        <div class="col-6 bg-secondary">2</div>
    </div>
</div>

.benefit-row.alt div：第一个孩子{
左：50%；
}
.benefit-row.alt div：最后一个孩子{
右：50%；
}
这是一个怎样的“php”问题？因为我提到它可能是我需要内联使用php的东西-我想为奇数和偶数添加一些排序语句…你不需要php，css已经为
：nth child（odd）提供了一个伪值
我知道这一点，但我想将其与第一个和最后一个孩子结合起来，这就是为什么我提到php，因为我不确定我是否可以将css的两个部分结合起来，所以我认为可能还有另一个解决方案……你可以将其变得更复杂，并在行循环中添加一个三元
，这太棒了，Kevin，非常感谢您将此写出来！：）我将使用CSS——我只是在解决如何组合这两个选择器时遇到了问题，不知道我是否需要使用PHP甚至jQuery——但似乎我可以使用CSS:）再次感谢@ShaunTaylor yah，在这种情况下使用php太麻烦了，很高兴它有帮助