[英]Make a div on top another
I have the structure html like this 我有这样的结构html
<div class="main-row">
<div class=""row-1">
</div>
<div class=""row-2">
</div>
</div>
row-1 & row-2 are like col-sm-6 grid system column in bootstrap. 第1行和第2行类似于bootstrap中的col-sm-6网格系统列。 Now i'm doing responsive I set both of them have width 100%, all I want is row-2 has to be on top row-1.
现在我正在做响应,我将它们都设置为100%的宽度,我想要的是第2行必须位于第1行的顶部。
You don't need javascript to do it. 您不需要javascript就能做到。 Your solution is using CSS - flexbox property
order:
您的解决方案使用CSS-flexbox属性
order:
On .row-2
you write order: 0
. 在
.row-2
您编写order: 0
。
.main-row {
width: 100%;
display: flex;
flex-direction: column;
}
.row-2 {
order: -1;
}
--- EDIT --- -编辑-
Another solution if you want to full invert the elements order is using flex-direction: column-inverse
. 如果要完全反转元素顺序的另一种解决方案是使用
flex-direction: column-inverse
。 eg instead of 1,2,3,4,etc... it will display etc,4,3,2,1 例如代替1,2,3,4,etc ...它将显示etc,4,3,2,1
.main-row {
width: 100%;
display: flex;
flex-direction: column-inverse; /*to display side by side use row-inverse*/
}
A quick demo here: http://codepen.io/sandrina-p/pen/EydrLE 此处是一个快速演示: http : //codepen.io/sandrina-p/pen/EydrLE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.