Question

我有这样的HTML：

<div class='box'>
    <div class='left'>content left</div>
    <div class='right'>content right</div>
</div>

现在，在智能手机设备中，我希望div类right出现在课程left之前。

我该怎么做？

Answer 1

以下代码如下：智能手机（肖像和风景）

@media only screen 
        and (min-width : 320px) 
        and (max-width : 480px) {
            .right,
            .left{
                float: left;
            }
        }

Answer 2

如果您可以使用javascript，并且如果您能够检测到用户在智能手机上的时间，您可以尝试这样的事情

var divs = document.getElementsByClassName('box');
for(var i=0; i<divs.length; i++) { 
  var rightDiv = divs[i].childNodes[1];
  divs[i].removeChild(rightDiv);
  divs[i].insertBefore(divs[i].childNodes[0], rightDiv);

}

Answer 3

如果您更改了元素的原始顺序，则可以使用纯CSS / HTML执行此类操作。

jsFiddle example - 尝试重新调整窗口大小

<强> HTML

<div class='box'>
    <div class='right'>content right</div>
    <div class='left'>content left</div>
</div>

<强> CSS

.left {
    background:red;
    height:200px;
    width:50%;
    float:left;
}
.right {
    background:blue;
    height:200px;
    width:50%;
    float:right;
}
@media screen and (max-width: 481px) {
    .left {
        width:100%;
        float:none;
    }
    .right {
        width:100%;
        float:none;
    }
}

如果您不喜欢这种方法，总会有一种替代方案，即元素的顺序不会改变。你用jQuery标记了这个，所以这里：

jsFiddle example - 尝试重新调整窗口大小

<强> HTML

<div class='box'>
    <div class='left'>content left</div>
    <div class='right'>content right</div>
</div>

<强>的jQuery

$(window).resize(function(){
    if ($(window).width() <= 481){  
      $('.right').insertBefore('.left');
    }
    else {
      $('.right').insertAfter('.left');
    }
});

CSS：Div出现在另一个下方

3 个答案: