Responsive Design pour la vue mobile avec des boîtes

Question

J'ai récemment reçu de l'aide sur un problème que j'ai eu et le code final est dans la section code. Maintenant, je viens de reconnaître que pour la vue smartphone, il ne ressemble pas à ce que je veux. Le format actuel est le suivant :

Image | Text   
Text | Image   
Image | Text   
Text | Image 

Pour l'affichage mobile, ce devrait être :

Image 
Text 
Image 
Text 
Image 
Text 
Image 
Text 

Le format de la deuxième et de la quatrième ligne doit être modifié pour la vue mobile, afin d'avoir l'ordre image - texte - image - texte, etc. Pour la vue mobile, j'ai cette section : @media only screen and (max-width: 768px){} . Par ailleurs, est-il judicieux d'avoir une classe distincte pour chaque ligne ? Pouvez-vous nous aider ?

.h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  padding-bottom: 50px;
}

.text {
  font-size: 24px;
  flex-direction: column;
}

.desc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.image,
.text {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  padding: 10px 10px 20px 10px;
  box-sizing: border-box;
  flex-direction: column;
  border: 2px solid;
}

.image img {
  max-width: 80%;
}

.left {
  justify-content: flex-start;
}

.right {
  justify-content: flex-end;
}

<div class="h1">Headline</div>
<div class="desc">
  <div class="image left">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p>
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p>
  </div>
  <div class="image right">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="image left">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p>
  </div>
  <div class="text">
    <b>Text</b>
    <p>Text</p>
  </div>
  <div class="image right">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
  </div>
</div>