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

想知道如何使用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) );
    } 

    });
});

jQuery（文档）.ready（函数（）{
jQuery（窗口）.resize（函数（）{
if（jQuery（window）.width（）<768）{
var sidebar1=document.getElementById（“sidebar1”）；
var body=document.getElementById（“右”）；
jQuery（侧边栏1）.after（jQuery（右））；
} 
});
});

HTML：

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

---

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

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

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

[编辑]我发现您可能使用引导，因此内容可能会线性化，并且

#侧栏

会出现在小屏幕上的

#右侧

（我认为这是主要内容）。如果是这种情况，那么在原始源代码中交换它们，因为通常将主要内容放在文档源代码的更高位置是一种好的做法。然后使用浮动为tablet/desktop版本创建列。Bootstrap甚至有这样一个类名：

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

---

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

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

[编辑]我发现您可能使用引导，因此内容可能会线性化，并且

#侧栏

会出现在小屏幕上的

#右侧

（我认为这是主要内容）。如果是这种情况，那么在原始源代码中交换它们，因为通常将主要内容放在文档源代码的更高位置是一种好的做法。然后使用浮动为tablet/desktop版本创建列。Bootstrap甚至有这样一个类名：

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

---

所以根据你的评论，我读了一些现有的帖子，并提出了这一点，这是可行的

jQuery(window).resize(function(){

var windowsize = jQuery(window).width();
if (windowsize < 768) {
    jQuery("#right.span9").insertBefore(jQuery("#sidebar1.span3"));
    } else {
        jQuery("#sidebar1.span3").insertBefore(jQuery("#right.span9"));
    }
});

jQuery（窗口）.调整大小（函数（）{
var windowsize=jQuery（window）.width（）；
如果（窗口大小<768）{
jQuery（“#right.span9”）.insertBefore（jQuery（#sidebar1.span3”）；
}否则{
jQuery（“#sidebar1.span3”）.insertBefore（jQuery（#right.span9”）；
}
});

---

再次感谢pawel为我指出了正确的方向。

因此，根据你的评论，我阅读了一些现有的帖子，并提出了这一点，这一点很有效

jQuery(window).resize(function(){

var windowsize = jQuery(window).width();
if (windowsize < 768) {
    jQuery("#right.span9").insertBefore(jQuery("#sidebar1.span3"));
    } else {
        jQuery("#sidebar1.span3").insertBefore(jQuery("#right.span9"));
    }
});

jQuery（窗口）.调整大小（函数（）{
var windowsize=jQuery（window）.width（）；
如果（窗口大小<768）{
jQuery（“#right.span9”）.insertBefore（jQuery（#sidebar1.span3”）；
}否则{
jQuery（“#sidebar1.span3”）.insertBefore（jQuery（#right.span9”）；
}
});

---

再次感谢pawel为我指明了正确的方向。

等等！在你恢复之前，请考虑一下你的表现。移动电话上的DOM更改是一项非常密集的任务。如果你的客户是平板电脑或台式机，你最好先为移动网站服务，然后更改DOM。很高兴认识蒂姆。实际上，我们使用m detect php类只加载移动设备所需的内容，但我认为这比快速的jQuery修复更值得花时间。等待在你恢复之前，请考虑一下你的表现。移动电话上的DOM更改是一项非常密集的任务。如果你的客户是平板电脑或台式机，你最好先为移动网站服务，然后更改DOM。很高兴认识蒂姆。实际上，我们使用m detect php类只加载移动设备所需的内容，但我认为这比快速的jQuery修复更值得花时间。我同意这是可行的，但我们使用了一个巨大的php文件，其中有许多这样构造的模板，加上该网站是实时的，所以我目前无法重新设计代码。请看这里的答案：这里-不仅是被接受的，还有其他使用现代CSS功能的优秀解决方案。我知道这是以前做过的。当我创建这些模板时，我对引导和css最佳实践有点陌生。非常感谢pawel。我同意这是可行的，但是我们使用了一个巨大的php文件，其中有许多这样构造的模板，加上该网站是实时的，所以我现在无法重新设计代码。请看这里的答案：这里-不仅是被接受的，还有其他使用现代CSS功能的优秀解决方案。我知道这是以前做过的。当我创建这些模板时，我对引导和css最佳实践有点陌生。非常感谢pawel。我不太愿意使用.resize（）事件，因为这将在用户导航页面时触发很多。我不太愿意使用.resize（）事件，因为这将在用户导航页面时触发很多。