Как сделать перенос блока?

Question

[kot98]

Есть три блока данных с названием, датой и числом:
На разрешении <768 нужно чтобы становилось так:

<div class="news__operations-wrapper">
                            <div class="news__operation-item">
                                <div class="news__operation-name">operationName</div>
                                <div class="news__operation-date">operationDate</div>
                                <div class="news__operation-amount">operationAmount</div>
                            </div>
                    </div>

.news {
&__operation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  &__operation-name {
    flex: 1 0 auto;
  }
  &__operation-date 
    width: 100px;
  }
  &__operation-amount {
    width: 80px;
    text-align: right;
    margin-left: 40px;
    @media all and (min-width: 768px) {
      margin-left: 92px;
    }
  }
}

Как этого добиться?

Comments

[Ankhena]

Не нужно городить лишних оберток.
Расставьте гридами как вам хочется. Элементарно 2х2.

Answer 1

[HARDOOPS]

Обернуть .news__operation-date и .news__operation-name в div.news__operation-main, которому задать следующее.

.news__operation-main {
    display: block;
}

@media (min-width: 768px) {
    .news__operation-main {
        display: flex;
    }
}

Вам не кажется, что использовать и дефис, и нижнее подчëркивание, мягко говоря, – перебор?