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

2018 年 10 月 4 日
 nikoo
例子： https://jsfiddle.net/89d627eh/ （可以左右拉动窗口宽度进行调试）

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

有没有优雅的实现方案？

（ 目前用很粗糙的实现方案： https://jsfiddle.net/xko4t3c7/ ）
2498 次点击
所在节点    问与答
9 条回复
Biebe
2018 年 10 月 4 日
flex order
nikoo
2018 年 10 月 4 日
@Biebe 谢谢，我搜索后参考 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order
测试外套了一个.main 并且 .main {display: flex;}
但这样只是横着排列，display: flex;没法让元素竖着拍
nikoo
2018 年 10 月 4 日
@Biebe 是我没认真看。。flex-direction: column; 可以实现

很优雅，很牛皮！

如果考虑老浏览器不支持 CSS3 的话还有什么兼容方案吗？
rabbbit
2018 年 10 月 4 日
banricho
2018 年 10 月 4 日
order 需要一个个搞
整体排序可以用 flex-direction

需要兼容低版本浏览器的话，考虑直接 JS 吧...
nikoo
2018 年 10 月 4 日
@rabbbit 兄弟的方案真不错，支持低版本浏览器
nikoo
2018 年 10 月 4 日
@banricho 用 js 是怎么搞？先 remove 然后再把.title 元素 append 到.poster 后面吗？
nikoo
2018 年 10 月 4 日
@rabbbit 实际测试了一下，这个 .poster {margin-top:30px} 不太妥，.title 如果是动态高度呢？
Hilong
2018 年 10 月 4 日
@rabbbit 厉害👍

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.xtra.eu.org/t/494829

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX