移动端div与slider布局顺序反转问题技术求助

嘿，我懂你现在的困扰——想在移动端把文字div和slider的上下顺序反过来，但之前用margin、负边距或者position调整时，不小心连累了其他区块错位对吧？其实不用这么折腾，用CSS Flexbox的order属性就能轻松搞定，而且完全不会影响其他元素的布局！

为什么之前的方法会出问题？ #

用负边距或者position: absolute调整位置时，元素会脱离正常的文档流，后面的元素会自动填补它原来的位置，这就是为什么无关区块会被带上来的原因。而order属性是Flexbox专为调整视觉顺序设计的，它不会改变元素在DOM里的结构，只是调整显示顺序，完全不会破坏文档流。

具体实现步骤 #

1. 首先确保你的父容器（包含文字div和slider的那个区块）在移动端视图下设置为Flex布局，并且是垂直排列：

   @media (max-width: 768px) {
     /* 替换成你实际的父容器类名 */
     .your-parent-container {
       display: flex;
       flex-direction: column;
       /* 如果有需要，可以添加gap来控制两个元素的间距 */
       gap: 2rem;
     }
   }
   

2. 然后给两个子元素设置order值，实现顺序反转：

   @media (max-width: 768px) {
     /* 文字div设置order:2，让它排在后面 */
     .text-content-div {
       order: 2;
     }
     /* slider设置order:1，让它排在前面 */
     .your-slider-div {
       order: 1;
     }
   }
   

   这里只需要把类名替换成你网站实际使用的类名就行~

额外提示 #

如果你的父容器本来就已经是Flex布局了，那第一步里的display: flex可以省略，只需要确保移动端的flex-direction是column就好。这种方法兼容性也很好，几乎所有现代移动端浏览器都支持Flexbox的order属性。

内容的提问来源于stack exchange，提问作者Engr Abdullah AL Mammun