您可以使用grid并重置order和grid-template-columns以获得更大的屏幕。
这里是一个断点为768 px的例子 （我在演示中使用了html5标签元素，但请随意使用您自己的标记和class/ids）

section {
  display: grid;
  gap: .5em;
  padding: .5em;
}

@media (min-width:768px) {
  section {
    grid-template-columns: 60% 1fr;
    grid-auto-flow: row dense;
  }
  main {
    order: -1;
    grid-row: auto /span 2;/*(auto or 1) /  span as many rows that you have elements to stand in second column */
  }
}

/* colors */

body {
  background: #333;
  color: #eee;
  margin: 0;
}

header {
  background: #004488
}

main {
  background: #FF0000
}

footer {
  background: #0A8800;
}

<section>
  <header>#004488 </header>
  <main> #FF0000 </main>
  <footer>#0A8800 </footer>
</section>

CSS grids和flexbox的混合应该可以实现这一点：

const main = document.querySelector( 'main' );

// To simulate mobile behaviour
document.body.addEventListener( 'click', event => {
  
  main.classList.toggle( 'mobile' );
  
})

main {
  display: grid;
  grid-template:
    "red blue" auto
    "red green" auto
   / auto 1fr;
  width: 100%;
  grid-gap: 20px;
}
#red {
  width: 65vw;
  height: 400px;
  background: red;
  grid-area: red;
  order: 1;
}
#blue {
  width: 100%;
  height: 300px;
  background: blue;
  grid-area: blue;
  order: 2;
}
#green {
  width: 100%;
  height: 300px;
  background: green;
  grid-area: green;
  order: 3;
}

.mobile {
  display: flex;
  flex-direction: column;
}
.mobile #red {
  width: 100%;
}

<main>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</main>

你可以通过修改order属性来改变移动的版本的顺序（你应该把它放在@media查询中，但是它是堆栈溢出的，所以为了安全起见，我用一个类来模拟它），在桌面上，你可以通过改变grid-template中的列或行的值来做到这一点。
grid-template文档：order的https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template文档：https://developer.mozilla.org/en-US/docs/Web/CSS/order

您可以通过order:1（order CSS属性）将flex应用于其父属性来实现这一点。
注意：如果你想使用Bootstrap，那么它会非常流畅。Bootstrap Orders
有关详细信息，请参阅此链接CSS Order

grid的一个替代方法是使用flex显示内容：

.container {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.red {
  background: red;
  width: 60%;
}

.blue {
  background: blue;
  margin-bottom: 10px;
}

.green {
  background: green;
}

.column {
  width: 35%;
}

@media (max-width:768px) {
  .container {
    flex-direction: column;
  }
  .column {
    display: contents;
  }
  .red {
    order: 2;
    margin-bottom: 10px;
    width: 100%;
  }
  .blue {
    order: 1;
  }
  .green {
    order: 3;
  }
}

<div class="container">
  <div class="red">red</div>
  <div class="column">
    <div class="blue">blue</div>
    <div class="green">green</div>
  </div>
</div>