如何使3列在手机上显示为2半宽+1全宽

<div class="container">
  <div class="half-width">Column 1</div>
  <div class="half-width">Column 2</div>
  <div class="full-width">Column 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.half-width {
  flex-basis: 50%;
}

.full-width {
  flex-basis: 100%;
}

@media screen and (max-width: 767px) {
  .half-width, .full-width {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 768px) {
  .half-width {
    flex-basis: 50%;
  }
  .full-width {
    flex-basis: 100%;
  }
}