Медиазапросы для модификаторов классов в css

@media (max-width: 425px) {
  .preview {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between;
        padding-top: 40px; */
  }
}

@media (max-width: 425px) {
  /* .preview {
        display: flex;
        flex-direction: column;
        /* justify-content: space-between;
        padding-top: 40px; 
    } */
  .preview_reverse {
    display: flex;
    flex-direction: column;
  }
}

<article class="preview">
  <header class="preview__head">
    <h2 class="preview__title">Покупки из дома еще не были такими легкими:</h2>
    <div class="preview__sub-title preview_to-right">
      теперь заказ оформляется в 1 окне: быстро и просто
    </div>
    <a class="preview__button preview_to-right" href="#">СМОТРЕТЬ</a>
  </header>
  <div class="preview__img">
    <a href="#"><img src="img/main/01.png" alt="01"></a>
  </div>
</article>
<article class="preview preview_reverse">
  <header class="preview__head">
    <h2 class="preview__title">Покупки из дома еще не были такими легкими:</h2>
    <div class="preview__sub-title">
      теперь заказ оформляется в 1 окне: быстро и просто
    </div>
    <a class="preview__button" href="#">СМОТРЕТЬ</a>
  </header>
  <div class="preview__img">
    <a href="#"><img src="img/main/02.png" alt="01"></a>
  </div>
</article>