不同屏幕下设置dom的显示顺序

最新推荐文章于 2023-06-20 11:51:14 发布

Helen_fight

最新推荐文章于 2023-06-20 11:51:14 发布

阅读量627

点赞数

分类专栏： flex 文章标签： flex

本文链接：https://blog.csdn.net/yemuxia_sinian/article/details/80936298

版权

flex 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

工作中用bootstrap搭了个响应式的官网，其中一块DOM结构是这样的：

<div class="fullad-box video-box">
		<div class="container dev-container">
			<div class="col-xs-12 col-xs-bottom col-sm-6 col-md-6 col-lg-6 fullad-right">
				<div class="phone-box">
					<img class="fixed-img" src="images/fixed5.png" />
					<img class="effect-img" src="images/effect5.png" />
				</div>
			</div>
			<div class="col-xs-12 col-xs-top col-sm-6 col-md-6 col-lg-6 fullad-left">
				<p class="title">试玩领取现金红包</p>
				<p class="content">钱牛为你提供超多好玩的应用，试玩还能领取丰厚的现金红包哦</p>
			</div>
		</div>
	</div>

在移动端下，类fullad-right和fullad-left会上下排列，正常情况：由于浏览器的加载顺序是从上到下加载的，所以类fullad-right会显示在fullad-left的上面，结果如下：

但现在的需求是移动端下想让文字先显示，在显示图片，在不改变dom的情况下，该如何设置呢。答案：flex布局的order。

flex的order可以用来设置或检索弹性盒模型对象的子元素的显示顺序。用法：用整数值来定义子元素的显示顺序，数值越大越往后排列。可以为负值。

所以首先设置父级（.dev-container）为弹性盒布局，然后分别为子元素（.fullad-right和.fullad-left）设置不同的order值就可以了。具体代码：

.dev-container{
		 display: -webkit-flex; 
		 display: -ms-flexbox; 
		 display: flex; 
		 -webkit-flex-wrap: wrap;
		 -ms-flex-wrap: wrap;
		 flex-wrap: wrap; 
	}
	.dev-container .fullad-right{
		float: none;
		width: 100%;
		order: 2;
		-webkit-order: 2;
	}
	.dev-container .fullad-left{
		float: none;
		width: 100%;
		order: 1;
		-webkit-order: 1;
	}

结果：