Alternate Floats in Flexbox/Container

Question

I have a series of flexbox items that contain an image and content. I'd like to alternate which side of the flexbox item the image appears (i.e., the left side of the box in one, the right side in the next). I can't seem to get it to work. Any suggestions are appreciated!

CSS

.offerings {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.offeringsItem {
    width: 90%;
    height: auto;
    margin: 10px;
    padding: 15px;
    border: 2px solid #dedede;

}

.offeringsContent {
    margin: 10px;
    position: relative;
}

.offeringsImg {
    margin: 10px;
    float: left;
}

.offeringsImg img {
    max-width: 100%;
    height: auto;
    display: block;
}

.offeringsImg:nth-of-type(odd) img {
    float: right;
}

.offeringsImg:nth-of-type(even) img {
    float: left;
}

HTML

<div class="offerings">
    <div class="offeringsItem">
        <div class="offeringsImg">
            <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
        </div>
        <div class="offeringsContent">
            Hi.
        </div>
    </div>
    <div class="offeringsItem">
    <div class="offeringsImg">
        <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
</div>

Answer 1

If you are about using flex, i believe using it on .offeringsItem is plenty enough. and flex-flow:row-reverse will do the job.

.offeringsItem {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  padding: 15px;
  border: 2px solid #dedede;
}

.offeringsItem:nth-of-type(odd) {
  flex-flow: row-reverse;
}

.offeringsContent,
.offeringsImg {
  margin: 10px;
}

.offeringsContent {
  flex: 1;
}

.offeringsImg img {
  max-width: 100%;
}

<div class="offerings">
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
</div>

I 'have removed some styles that did not seem necessary, it also makes the CSS update easier to read ;)

Answer 2

Do you want something like this?

The CSS class should be corrected to.

.offeringsItem:nth-of-type(odd) img {
  float: right;
}

.offeringsItem:nth-of-type(even) img {
  float: left;
}

Instead of applying on the div with the class offeringsImg, you need to apply the nth-of-type() selecor to the div with the class offeringsItem because only these elements have a common parent and the index will be taken properly, before they had separate parents hence it did not work!, One more correction is that you had missed the final closing div in the HTML.

.offerings {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.offeringsItem {
  width: 90%;
  height: auto;
  margin: 10px;
  padding: 15px;
  border: 2px solid #dedede;
}

.offeringsContent {
  margin: 10px;
  position: relative;
}

.offeringsImg {
  margin: 10px;
}

.offeringsImg img {
  max-width: 100%;
  height: auto;
  display: block;
}

.offeringsItem:nth-of-type(odd) img {
  float: right;
}

.offeringsItem:nth-of-type(even) img {
  float: left;
}

<div class="offerings">
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
  </div>
</div>