flexbox nested: two vertical boxes in two vertical boxes with breakpoint

Question

I want 4 flex boxes in one row with the same height. There is one breakpoint at which the 4 flex boxes should break in two lines with 2 flexboxes. The 2 Flexboxes in each line now should have the same height.

Here is the code:

.content {
  color: #fff;
  font-size: 20px;
  margin: 50px auto;
  max-width: 1045px;
  padding: 0;
  text-shadow: 1px 1px #000;
}
.content .fullContainer,
.content .halfContainer,
.content .quarterContainer,
.content .quarterSecondContainer {
  display: flex;
}
@media (max-width: 1075px) {
  .content .halfContainer,
  .content .quarterSecondContainer {
    display: block;
  }
}
.content .fullContainer .full {
  background-color: #ff0;
  color: #000;
  margin-bottom: 15px;
  width: 1045px;
}
@media (max-width: 1075px) {
  .content .fullContainer .full {
    width: 515px;
  }
}
.content .halfContainer .half {
  background-color: green;
  margin-bottom: 15px;
  width: 515px;
}
.content .halfContainer .half:first-child {
  margin-right: 15px;
}
@media (max-width: 1075px) {
  .content .halfContainer .half {
    display: block;
  }
  .content .halfContainer .half:first-child {
    margin-right: 0;
  }
}
.content .quarterContainer .quarter {
  background-color: pink;
  color: #fff;
  margin-bottom: 15px;
  margin-left: 15px;
  width: 250px;
}
.content .quarterContainer .first {
  margin-left: 0;
}
@media (max-width: 1075px) {
  .content .quarterContainer .firstInSecond {
    margin-left: 0;
  }
}

<div class="content">
  <div class="fullContainer">
    <div class="full">Full Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
  </div>

  <div class="halfContainer">
    <div class="half">half Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
    <div class="half">half Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus musLorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
  </div>

  <div class="quarterContainer">
    <div class="quarterSecondContainer">
      <div class="quarterContainer">
        <div class="quarter first">quart</div>
        <div class="quarter">quart Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</div>
      </div>
    </div>
    <div class="quarterSecondContainer">
      <div class="quarterContainer">
        <div class="quarter firstInSecond">quart</div>
        <div class="quarter">quart</div>
      </div>
    </div>
  </div>

The pink one.