如何使用CSS实现前后两个元素位置交换
如摘要所述，PC端左右布局的HTML元素，在手机移动端显示时，分别按Width 100%显示，结果展示的是前后的效果。
想要交换两个元素的显示顺序，在此分享实现方法：
首先，想要单独控制html元素在移动端的显示，可以在CSS中使用如下方法：
- @media screen and (max-width: 450px){
- body{
- width: 100%;
- overflow: hidden;
- }
- #new_top .topbody{
- width: 100%;
- }
- }
复制代码
如下的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;
