Every/other CSS techniques - php

Question

I am creating a page with 4 different sections. In each section there is a responsive image and on the image there is text and some buttons. Right now they are aligned a bit off center and to the right. I am trying to achieve so that the 1st div the text and buttons float right and the 2nd div the text and buttons float left and so on. I am using the even odd nth property but it is only responding on the even css nth property. Here is the CSS and html. Keep in mind I am just using the background color now as an example and will put in the floats and padding if I get it working.
.popup-open:nth-child(odd) {
background: #ff0000;
}
.popup-open:nth-child(even) {
background: #000000;
}
<div class="popup-open">
<div class="icons-large">
<?php
$fields = CFS()->get('icons_large');
if($fields) :
foreach ($fields as $field) : ?>
<div class="row">
<div class="image">
<img src="<?php echo $field['icons_big'];?>" alt="">
</div>
</div>
<?php endforeach; endif; ?>
</div>
<div class="icons-large">
<?php
$fields = CFS()->get('tour_titles');
if($fields) :
foreach ($fields as $field) : ?>
<?php echo $field['tour_name'];?>
<?php endforeach; endif; ?>
</div>
<div class="title"><?php the_title(); ?></div>
</div>

Answer 1

I think you should add a class to the divs and target them that way, you will have more control over it too.
if($fields) :
$i = 1;
foreach ($fields as $field) :
if($i === 2){
$class = "even";
$i = 1;
}else if($i === 1){
$class = "odd";
$i = 2;
}
<div class="row <?=$class;?>">
<div class="image">
<img src="<?php echo $field['icons_big'];?>" alt="">
</div>
</div>
<?php endforeach; endif; ?>