css - 带有网格或 flex 的布局，将在桌面上模拟两列，在移动设备上模拟一列

Question

是否可以使用 grid 或 flex 实现这样的布局，这会在桌面上伪造两列，在移动设备上伪造一列，子项高度不均匀。

对于台式机和移动设备，我都需要这个结果。 不是这个，对于桌面。

我得到的最接近的是这个https://jsfiddle.net/nebadin/0sx7nf8a/15/

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

div {
  background: gray;
  color: white;
  padding: 20px;
}

p {
  font-size: 1.5em;
}

@media screen and (max-width:768px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}

<main class="wrapper">
  <section class="box one">
    <div>
      <p>1</p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor nec augue vitae rutrum. Morbi vel ullamcorper enim, non elementum erat. Vestibulum at ex eu urna semper vestibulum vitae non augue. Aenean quis justo sed neque suscipit
      dapibus. Morbi rutrum lacus ut odio lacinia fringilla. Aenean et arcu rhoncus, cursus nulla at, volutpat metus. Morbi et odio dictum erat fringilla molestie sed quis nisi. Nulla posuere, neque non tempus commodo, diam ante vestibulum felis, sed
      convallis nulla erat sit amet metus. Integer tortor purus, pulvinar a tincidunt at, aliquam id dui. Pellentesque non dui ut mi sagittis cursus vel ut augue. In pretium sollicitudin dui ac tincidunt. Duis id ligula dignissim, accumsan ligula ac,
      mollis ipsum. Pellentesque varius urna vel magna scelerisque, non efficitur diam semper. Proin libero quam, condimentum egestas sollicitudin et, vulputate a mauris. Nam ultricies dui vitae velit ultricies, vehicula ultrices lorem varius. Vivamus
      pretium fermentum justo at gravida. Nullam venenatis justo tortor, non feugiat nibh faucibus eget. Quisque lacinia sed purus eu feugiat. Aenean viverra id ligula sit amet auctor. Pellentesque lacus urna, porttitor id elit non, porttitor blandit
      ex. Sed aliquam a massa eget porttitor. Morbi consequat sem tortor, vitae venenatis enim blandit ut. In hac habitasse platea dictumst.
    </div>
  </section>
  <section class="box two">
    <div>
      <p>2</p> Nulla malesuada vitae justo at faucibus. Nunc et sollicitudin elit.
    </div>
  </section>
  <section class="box three">
    <div>
      <p>3</p> Pellentesque lacus urna, porttitor id elit non, porttitor blandit ex. Sed aliquam a massa eget porttitor. Morbi consequat sem tortor, vitae venenatis enim blandit ut. In hac habitasse platea dictumst.
    </div>
  </section>
  <section class="box four">
    <div>
      <p>4</p> Nam ultricies dui vitae velit ultricies, vehicula ultrices lorem varius. Vivamus pretium fermentum justo at gravida.
    </div>
  </section>
</main>

任何帮助，非常感谢:)

标签： csslayoutflexboxgrid