我想在自适应CSS网格移动版中断行

Question

我想使此CSS网格响应移动版本（像这样的折线->照片，然后是文本，照片文本等），我需要在媒体中编写才能做到这一点？

.grid-container {
  margin: 0 auto;
  width: 100%;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "area11 area11 area12 area12" "area11 area11 area12 area12" "area21 area21 area22 area22" "area21 area21 area22 area22" "area31 area31 area32 area32" "area31 area31 area32 area32";
}

a {
  text-decoration: none;
}

.area11 {
  grid-area: area11;
  padding: 100px;
}

.area12 {
  grid-area: area12;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/extras.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.area21 {
  grid-area: area21;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/services.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.area22 {
  grid-area: area22;
  padding: 100px;
}

.area31 {
  grid-area: area31;
  padding: 100px;
}

.area32 {
  grid-area: area32;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/theysay.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


}

}

<div class="grid-container">
  <div class="area11">

    <p>
      B
    </p>

  </div><br class="mobile-break">
  <div class="area12">background Image</div>

  <div class="area21">background Image</div>


  <div class="area22">

    <p>A</p>
  </div>
  <div class="area31">
    <p>C</p>
  </div>
  <div class="area32">background Image</div>
</div>

我尝试了这一点：width：100％，尝试了无网格但无论如何都尝试了，尝试了表td但无论如何都尝试了。这就是我想要的但不能使它负责 对不起，我的英语水平