Vuetfiy - alternate flexbox floats

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;
  }

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;
  }
}