工作中用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;
}
结果: