交换列 - 第一个孩子最后一个孩子 - Bootstrap

Question

我正在尝试更改我拥有的某些行的布局。它们应该如下所示：

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

<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>

因此，对于每个 .benefit-row，我都在尝试交换 .benefit-text 和 benefit-image。

我可以设法用这个来交换它们：

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

但要交替行，我想我需要利用第 n 个子元素的奇数和偶数 CSS。

但我不确定如何实现它。它几乎需要一个 if 语句，例如，如果行是奇数，则第一个孩子 50% 和最后一个孩子 50%...

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

任何帮助将不胜感激。感谢收看！

Answer 1

就像我在上面的 cmets 中所说，最好只使用 CSS 来完成这项任务，使用 oddcss 伪选择器：

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

Sample fiddle

这会产生这样的结果：

而不是使用 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>

基本上产生same result：

但是代码更丑。所以使用正确的工具来完成这项工作。