Vuetfiy - альтернативные поплавки flexbox

Question

Я знаю, что на этот вопрос ответили здесь , но я не могу изменить свое изображение. Я использую Vuetify, но перезаписываю определенные стили, так что я думаю, что это может быть как-то связано с этим.

Я пытался использовать и flex-flow: row-reverse;, и float: right/left, но безуспешно ..

Кто-нибудь может увидеть очевидную ошибку, которую я пропускаю?

<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

Мне пришлось уйти в отставку от родителя и применить flex-direction: row-reverse

.posts-list {
  &:nth-child(even) > .posts-list-item > .posts-list-item__content {
    flex-direction: row-reverse;
  }
}