I am trying to create a series of flexbox items that have both an image and content. I want the images to alternate sides within each flexbox item (one on the left, one on the right, and so on), but I can't figure out how to make it work. Any advice or suggestions would be greatly 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>