Vuetfiy - alternate flexbox floats - css

Question

I know this has been answered here but for I cannot get my image to alternate. I am using Vuetify but overwriting certain styles so I think that might have something to do with it.
I have tried using both flex-flow: row-reverse; and float: right/left but without any luck..
Can anyone see an obvious error I am missing?
<template>
<v-card class="mx-auto mt-5 posts-list-item" outlined>
<v-container class="posts-list-item__content">
<v-card flat class="posts-list-item__container posts-list-item__image">
<v-img
class="pa-2 posts-list-item__img"
src="https://picsum.photos/510/300?random"
></v-img>
</v-card>
<v-card
flat
class="posts-list-item__container posts-list-item__description"
>
<v-card-title class="mb-4 posts-list-item__title">{{
post.title
}}</v-card-title>
<v-card-subtitle class="posts-list-item__subtitle">
{{ post.content }}
</v-card-subtitle>
</v-card>
</v-container>
</v-card>
</template>
<style lang="scss">
.posts-list-item {
&__content {
display: flex;
}
&__container {
&:nth-of-type(odd) {
float: left;
}
&:nth-of-type(even) {
float: right;
}
}
&__image {
width: 33%;
}
&__description {
width: 66%;
display: flex;
flex-direction: column;
align-content: stretch;
}

Answer 1

I had to step down from the parent and apply flex-direction: row-reverse
.posts-list {
&:nth-child(even) > .posts-list-item > .posts-list-item__content {
flex-direction: row-reverse;
}
}