:nth-child(even/odd) not working with acf

Question

I am using bootstrap and advanced custom fields and have a repeater field that spits out image and text. I am trying to get the image and text to swap sides ( float left or right ) every other row that is looped

The following CSS is the most logical, but I've tried many different nestings and variations.

.tour-row .col-md-5:nth-child(odd) {
  float: left !important;
}

.tour-row .col-md-5:nth-child(even) {
  float: right !important;
}

<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      Tour 2
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="asdfddddddd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      another tour
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="klasdjfd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/1springmural_handlebar.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
</div>
<!-- end wrapper -->

Answer 1

As per the specs, "The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings." (read a good refresher about the nth-child rule here). Here your CSS rule translates to "for every col-md-5 element that is an ODD child of a .tour-row div, make it float left" or another way to put it, "in a tour-row div, make every odd col-md-element float left." But that's not what you want to do (from what I understand of your question). You want "for every odd ROW, make the col-md-5 float left." To do that based on the way you've structured your HTML, you'll want a rule like this:

.wrapper:nth-child(odd) .col-md-5 {
    float: left ;
}

And to make your even rows float right, you just do this:

.wrapper:nth-child(even) .col-md-5 {
    float: right ;
}

To simplify things even more, you can just do this CSS:

.wrapper .col-md-5 {
    float: right ;
}

.wrapper:nth-child(odd) .col-md-5 {
    float: left;
}

Hope that helps!