Swapping columns - first-child last-child - Bootstrap - php

Question

Im trying to alternate the layout of some rows I have. They should look like this:
It's in bootstrap and there is a loop outputting each row. The output looks like this:
<div class="container benefit-container">
<div class="row benefit-row">
<div class="col-md-6 benefit-text">
<h4>...</h4>
<p>...</p>
...
</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>
...
</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>
...
</div>
<div class="col-md-6 benefit-image">
<img src="#" />
</div>
</div>
</div>
So for each .benefit-row I'm trying to swap around the .benefit-text and benefit-image.
I can manage to swap them around using this:
.benefit-row div:first-child {
left: 50%;
}
.benefit-row div:last-child {
right: 50%;
}
But to alternate the rows, I think I need to utilise the nth-child odd and even CSS.
But I'm not sure how to implement it. It almost needs to be an if statement such as, if row is odd then first child 50% and last child 50%...
Can this even be done with CSS alone? Perhaps I need to write my css inline and use php somehow?
Any help would be really appreciated. Thanks for looking!

Answer 1

Like I said in the comments above it's preferable to just use CSS for this task alone using odd css pseudo selectors:
.benefit-row:nth-child(odd) div:first-child {
left: 50%;
}
.benefit-row:nth-child(odd) div:last-child {
right: 50%;
}
Sample fiddle
This yields something like this:
Rather than using PHP and adding some odd and even with ternary
<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>
Basically yields the same result:
But with uglier code. So use the correct tool for the job.