我在这个愚蠢的问题上花了一整天的时间，所以如果我听起来很生气，请道歉。所以我有一个网格，我首先设计了移动。潜水像这样
A
B
A
B
A
B
当窗口大小变大时，网格会一分为二
A B
1 B
2 B
A B
A B
A B
但我想要一些元素，当网格分裂时切换位置
A B
B A
A B
B A
A B
我想没有一个简单的方法可以做到这一点，而不需要拔牙，对吧？我是一个从事网页设计的新手。
https://jsfiddle.net/7y0av1L2/
代码基本上是图像和段落。我想不时地交换它们，以提供更多的视觉多样性。
<div>
<p>
GOTCHI is a speculative design project designed to incentivize a prolonged state of play via a quirky interaction method that encourages the user to manage their electronic footprint on their cellphone or computer.
<br>
We carry more digital waste than ever before (outdated pictures, documents, videos, etc.). This hoarding of digital files and lack of organization is called Digital Clutter.
<br>
Enter GOTCHI, a homage to the traditional Japanese game Tamagotchi. He incentivizes the user to periodically delete data from their devices. By feeding GOTCHI digital clutter, the user is forced to brush through their data to decide what files to delete.
</p>
</div>
<div>
<img src="src/gotchi/video link.png" width="2104" height="3163">
</div>
<div>
<h2>IDEATION</h2>
<p>
We began the preliminary design stage on the online platform Figma. We wanted to create a design that tackled themes of consumption and waste. This topic branched out into conversations regarding the management of physical waste and digital waste.
<br>
One of my teammates expressed the desire to incorporate Tomogochi, a digital toy from her childhood into the design. I pitched the idea of combining it with a smart trashcan idea that we ideated over previously. This was where the idea of Gotchi originated.
</p>
</div>
<div>
<img src="src/gotchi/figma board.png" width="1121" height="1159">
</div>
使用Bootstrap 5，您可以使用订单类。https://getbootstrap.com/docs/5.0/utilities/flex/#order
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-1 order-md-3 p-4 bg-dark text-white">First item Mobile, Last Item Desktop</div>
<div class="order-2 order-md-1 p-4 bg-highlight">Second item Mobile, First Item Desktop</div>
<div class="order-3 order-md-2 p-4 bg-dark text-white">Last Item Mobile, Second Item Desktop</div>
</div>你好，我有这个棘手问题的另一个解决方案。
* {margin: 0; padding: 0; box-sizing: border-box;}
.wrapper {max-width: 1000px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: auto auto; gap: 10px; padding: 10px;}
.black {background: #000;}
.gray {background: #666;}
.item {text-align: center; font-size: 40px; color: #fff; padding: 20px 0; width: 100%;}
@media (min-width: 768px) {
.item1 {grid-column: 1 / 5;}
.item2 {grid-column: 5 / 9;}
.item3 {grid-column: 5 / 9;}
.item4 {grid-column: 1 / 5; grid-row:2;}
.item5 {grid-column: 1 / 5;}
.item6 {grid-column: 5 / 9;}
.item7 {grid-column: 5 / 9;}
.item8 {grid-column: 1 / 5; grid-row:4;}
}
@media (max-width: 768px){
.item {display:grid; grid-column: 1 / span 2;}
}<div class="wrapper">
<div class="item item1 black">A</div>
<div class="item item2 gray">B</div>
<div class="item item3 black">A</div>
<div class="item item4 gray">B</div>
<div class="item item5 black">A</div>
<div class="item item6 gray">B</div>
<div class="item item7 black">A</div>
<div class="item item8 gray">B</div>
</div>希望它对你有用！！！
您可以使用下级管理您的物品
.push-right {float: right;}
.pull-left {float: left;}
* {margin: 0; padding: 0; box-sizing: border-box;}
.wrapper {max-width: 1000px; width: 100%; margin: 0 auto; justify-content: center;}
.black {background: #000;}
.gray {background: #666;}
.item {text-align: center; max-width: calc(500px - 20px); width: 100%; font-size: 40px; color: #fff; margin: 10px; float: left;}
.push-right {float: right;}
.pull-left {float: left;}
@media (max-width: 991px){
.item {max-width: calc(100% - 20px);}
}<div class="wrapper">
<div class="item black">A</div>
<div class="item gray">B</div>
<div class="item black push-right">A</div>
<div class="item gray pull-left">B</div>
<div class="item black">A</div>
<div class="item gray">B</div>
<div class="item black push-right">A</div>
<div class="item gray pull-left">B</div>
</div>