如何使用CSS实现前后两个元素位置交换

如摘要所述，PC端左右布局的HTML元素，在手机移动端显示时，分别按Width 100%显示，结果展示的是前后的效果。


想要交换两个元素的显示顺序，在此分享实现方法：

首先，想要单独控制html元素在移动端的显示，可以在CSS中使用如下方法：

1. @media screen and (max-width: 450px){
   
2.         body{
   
3.                 width: 100%;
   
4.                 overflow: hidden;
   
5.         }
   
6.         #new_top .topbody{
   
7.                 width: 100%;
   
8.         }
   
9. }

复制代码

如下的html结构,默认是包含前的Div元素显示在前方

<div id="mainbody">
      <div width="100%">前</div>
      <div width="100%">后</div>
</div>

通过如下Css方法,可以实现位置前后位置交换

#mainbody{

display: flex;
justify-content: space-between;
flex-direction: column-reverse;

}


如果是有需求左右位置互换，可以使用flex-direction:row-reverse;

点击阅读更多内容！

如果遇到DIV元素中，有多个同级子元素，想要更换其中某个元素位置，该如何实现呢。

实现方法如下：设置父级元素CSS样式，display: flex;flex-direction: column;

子元素通过设置order属性调整显示顺序，比如，div1{order:2;}  div2{order:1},就可以调整为div2显示在div1前面