小屏幕下通过css自动实现上下位置颠倒例子

最新推荐文章于 2026-08-10 11:00:29 发布

原创最新推荐文章于 2026-08-10 11:00:29 发布 · 571 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Demo</title>
		<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
		<link href="layui/css/layui.css" rel="stylesheet">
		<style>
			/* 在小屏幕下（例如手机），交换 A 和 B 的顺序 */
			@media (max-width: 767px) {
				.column-reverse {
					display: flex;
					flex-direction: column-reverse;
					/* 改变排列顺序 */
				}
			}
		</style>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row column-reverse">
				<div class="layui-col-md12">
					<div class="layui-bg-red " style="display:flex; align-items: center; height: 100px; justify-content: center; ">A<br/>b<br/>22c</div>
				</div>
				<div class="layui-col-md12 ">
					<div class="layui-bg-orange " style="height: 100px; line-height:100px;text-align: center; ">B</div>
				</div>
			</div>
		</div>
	</body>
</html>