Question

我有div字段，包括input元素和label元素。两者都显示：块

<div class="cf-full">
    <input id="a" >
    <label class="helptext"</label>
</div>

因此在普通视图中，输入字段将首先出现。但是，我希望布局能够响应，因此在移动设备中标签将首先出现。

我知道这个DOM操作可以通过javascript轻松实现。但有没有办法通过纯css实现反向DOM元素的顺序？

Answer 1

这有效

div {
    display:table;
}
input {
    display:table-footer-group;
}
label {
    display:table-header-group;
}

http://jsfiddle.net/v8xTC/

Answer 2

是的：你正在尝试这样的事情:(你可以在jsfiddle中调整视口大小以查看会发生什么）http://jsfiddle.net/SuWLr/

<style type="text/css">
.cf-full input,
.cf-full label{
    float:left;
}
@media all and (max-width: 300px){
    .cf-full input,
    .cf-full label{
        float:right;
    }
}
</style>

<div class="cf-full">
    <input id="a" />
    <label class="helptext">Label</label>
</div>

之后

更新：因为我不清楚标签从上到下（上/下）的变化所以这可能会有所帮助。

与某些positiong样式类似的东西：http://jsfiddle.net/SuWLr/1/

.cf-full {
    position:relative;
}
.cf-full input,
.cf-full label{
    display:block;
    position:absolute;
}
.cf-full input {left:0;top:20px;}
.cf-full label{left:0;top:0px;}

@media all and (max-width: 300px){
    .cf-full input {left:0;top:0px;}
    .cf-full label{left:0;top:20px;}
}

响应式设计css dom元素操作

2 个答案: