margin-top solo quando l'elemento flessibile è avvolto

Ho un contenitore flessibile con due elementi flessibili. Voglio impostare un margine superiore sul secondo, ma solo quando è avvolto e non sulla prima linea flessibile.

Se possibile, voglio evitare di utilizzare le media query.

Ho pensato che il margine inferiore sul primo elemento potesse essere una soluzione. Tuttavia, aggiunge spazio in basso quando gli elementi non sono avvolti, quindi stesso problema.

Questo è il mio codice:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Puoi aggiungerne un po ' margin-topa entrambi gli elementi flessibili e un negativo margin-topdella stessa quantità al contenitore flessibile.

In questo modo, il margine negativo del contenitore flessibile neutralizzerà il margine degli elementi flessibili sulla prima riga, ma non il margine degli elementi che sono stati spostati su altre righe.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>