前端两个div盒子位置互换

可以通过CSS的flex布局实现两个div盒子位置互换。具体的实现方法如下：

HTML代码：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: row;
}

.box1 {
  order: 2; /* 设置box1的顺序为2 */
}

.box2 {
  order: 1; /* 设置box2的顺序为1 */
}

/* 当屏幕宽度小于600px时，将flex-direction设置为column，使两个盒子垂直排列 */
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .box1 {
    order: 1; /* 设置box1的顺序为1 */
  }
  .box2 {
    order: 2; /* 设置box2的顺序为2 */
  }
}

通过设置两个盒子的order属性，可以改变它们在flex容器中的顺序。当屏幕宽度小于600px时，通过媒体查询将flex-direction设置为column，使两个盒子垂直排列，并且交换它们的顺序。