jquery - CSS:Div 出现在另一个 Div 下方

Question

我有这样的 HTML:

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

现在，在智能手机设备中，我希望 div 的 class is right 出现在 class left 之前。

我该怎么做？

Answer 1

如果您更改了元素的原始顺序，则可以使用纯 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');
    }
});