这是一个不能用现代的CSS处理的奇怪的请求。

我创建了一个函数，通过在Object 1的所需位置插入一个标记来交换元素。

然后，我通过调用window对象上的matchMedia方法创建了一个MediaQueryList。
MediaQueryList对象存储有关应用于文档的media query的信息，同时支持针对文档状态的即时匹配和事件驱动匹配。-MDN

因此，我使用了一个事件驱动的侦听器，只要屏幕低于或等于1000px，条件语句就会调用该侦听器。

function swapElements(obj1, obj2) {
  // create marker element and insert it where object 1 is
  var mkr = document.createElement("div");
  obj1.parentNode.insertBefore(mkr, obj1);

  // move object 1 to right before object 2
  obj2.parentNode.insertBefore(obj1, obj2);

  // move object 2 to right before where object 1 used to be
  mkr.parentNode.insertBefore(obj2, mkr);

  // remove temporary marker node
  mkr.parentNode.removeChild(mkr);
}

// create function with if - else statement
function setMediaQuery(x) {
  if (x.matches) {
    swapElements(document.querySelector(".item3"), document.querySelector(".item2"));
  }
}

// create a MediaQueryListObject
const mediaQueryMax = window.matchMedia("(max-width: 1000px)");
const mediaQueryMin = window.matchMedia("(min-width: 1000px)");

// call the match function at run time
setMediaQuery(mediaQueryMax);

// add the match function as a listener for state changes
mediaQueryMax.addListener(setMediaQuery)
mediaQueryMin.addListener(setMediaQuery)

.grid {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: grey
}

.column {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-content: start;
  width: 49.5%;
  background: white
}

.column1 {
  justify-content: right;
}

.column2 {
  justify-content: left;
}

.item {
  width: 97.5%;
  max-width: 720px;
  max-height: 720px;
  padding: 10px;
  color: #fff;
  font-size: 30px
}

.item1 {
  width: 80%;
  height: 100px;
  background: red
}

.item2 {
  width: 50%;
  height: 190px;
  background: blue
}

.item3 {
  width: 40%;
  height: 80px;
  background: green
}

.item4 {
  width: 100%;
  height: 50px;
  background: yellow
}

@media only screen and (max-width: 1000px) {
  .column {
    width: 100%;
  }
  .column1,
  .column2 {
    justify-content: center;
  }
  .grid,
  .column {
    row-gap: 1em;
  }
  .grid {
    background: transparent;
    border: solid 18px grey;
  }
}

<main class="grid">
  <div class="column column1">
    <div class="item item1">1</div>
    <div class="item item3">3</div>
  </div>
  <div class="column column2">
    <div class="item item2">2</div>
    <div class="item item4">4</div>
  </div>
</main>

您可以使用@media only screen将一列中的div设置为某个宽度，然后使用grid，但是您将拥有相同高度的行，如果您不想这样做，您可以使用js来替换Childs。像这样。

Script.js

let item1 = document.querySelector(".item1");
let item2 = document.querySelector(".item2");
let item3 = document.querySelector(".item3");
let item4 = document.querySelector(".item4");

let doneOnce = false;
let prevWidth = false;
let widthChanged = false;

document.addEventListener("DOMContentLoaded", function () {
    width = document.body.clientWidth;
    if (width <= 600) {
        item3.replaceWith(item2);
        item4.parentElement.insertBefore(item3, item4);
    }
});

window.addEventListener("resize", () => {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    if (
        (width <= 600 && prevWidth > 600 && prevWidth) ||
        (width > 600 && prevWidth <= 600 && prevWidth)
    ) {
        doneOnce = false;
        widthChanged = true;
    }

    if (width <= 600 && !doneOnce && widthChanged) {
        item3.replaceWith(item2);
        item4.parentElement.insertBefore(item3, item4);
        doneOnce = true;
    } else if (width > 600 && !doneOnce && widthChanged) {
        item2.replaceWith(item3);
        item4.parentElement.insertBefore(item2, item4);
        doneOnce = true;
    }
    prevWidth = width;
});

Style.css

body {
    margin: 0;
}

* {

    box-sizing: border-box;
}
.grid {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: grey;
}
.column {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-content: start;
    width: 49.5%;
    background: white;
}
.column1 {
    justify-content: right;
}
.column2 {
    justify-content: left;
}
.item {
    width: 97.5%;
    max-width: 720px;
    max-height: 720px;
    padding: 10px;
    color: #fff;
    font-size: 30px;
}
.item1 {
    width: 80%;
    height: 100px;
    background: red;
}
.item2 {
    width: 50%;
    height: 190px;
    background: blue;
}
.item3 {
    width: 40%;
    height: 80px;
    background: green;
}
.item4 {
    width: 100%;
    height: 50px;
    background: yellow;
}

@media only screen and (max-width: 600px) {
    .grid {
        flex-direction: column;
        align-items: center;
    }
    .grid > div {
        justify-content: center;
    }
}

Index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <main class="grid">
        <div class="column column1">
            <div class="item item1">1</div>
            <div class="item item3">3</div>
        </div>
        <div class="column column2">
            <div class="item item2">2</div>
            <div class="item item4">4</div>
        </div>
    </main>