javascript - 更改移动设备的 DOM 堆叠顺序

Question

想知道如何使用 jQuery 更改移动设备的 DOM 堆叠顺序，这样我们就不必使用 php。目前我正在尝试:

jQuery(document).ready(function(){

jQuery(window).resize(function() {

if (jQuery(window).width() < 768) {
    var sidebar1 = document.getElementById("sidebar1");
    var body = document.getElementById("right");
    jQuery(sidebar1).after( jQuery(right) );
    } 

    });
});

HTML:

<div class="row-fluid">
   <div id="sidebar1" class="span3">
   <div id="right" class="span9">

我可能需要使用 insertAfter 或 prepend，但不确定。谢谢

Answer 1

您不必在 DOM 中重新排序这些元素，您可以使用 CSS 和媒体查询来实现您所需要的:

@media screen and(max-width: 768px){
    #sidebar1 { float:right; }
    #right { float: left; }
}

[edit] 我看到您可能使用 bootstrap，因此内容可能会线性化，并且 #sidebar 出现在 #right 上方(我认为这是主要内容)小屏幕。如果是这种情况，则将它们交换到原始源中，因为将主要内容放在文档源中的较高位置通常是一个好习惯。然后使用 float 来创建平板电脑/桌面版本的列。 Bootstrap 甚至有一个类名:

<div class="row-fluid">
   <div id="right" class="span9 pull-right">
   <div id="sidebar1" class="span3">