HTML 响应式布局是否能优雅的调整元素上下位置？

[nikoo]

例子： https://jsfiddle.net/89d627eh/ （可以左右拉动窗口宽度进行调试）

在该页面中，.title 的 div 写在.poster 上面
现在想在屏幕宽度<500p 时将.title 移动至.poster 下方

有没有优雅的实现方案？

（ 目前用很粗糙的实现方案： https://jsfiddle.net/xko4t3c7/ ）

[Biebe]

flex order

[nikoo]

@Biebe 谢谢，我搜索后参考 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order
测试外套了一个.main 并且 .main {display: flex;}
但这样只是横着排列，display: flex;没法让元素竖着拍

[nikoo]

@Biebe 是我没认真看。。flex-direction: column; 可以实现

很优雅，很牛皮！

如果考虑老浏览器不支持 CSS3 的话还有什么兼容方案吗？

[rabbbit]

[banricho]

order 需要一个个搞
整体排序可以用 flex-direction

需要兼容低版本浏览器的话，考虑直接 JS 吧...

[nikoo]

@rabbbit 兄弟的方案真不错，支持低版本浏览器

[nikoo]

@banricho 用 js 是怎么搞？先 remove 然后再把.title 元素 append 到.poster 后面吗？

[nikoo]

@rabbbit 实际测试了一下，这个 .poster {margin-top:30px} 不太妥，.title 如果是动态高度呢？

[Hilong]

@rabbbit 厉害👍