0

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 を使用する必要があるかもしれませんが、よくわかりません。ありがとう

4

2 に答える 2

3

DOM でこれらの要素を並べ替える必要はありません。CSS とメディア クエリを使用して、必要なものを実現できます。

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

[編集] おそらくブートストラップを使用しているようです。そのため、コンテンツは線形化され、小さな画面では#sidebar上(メイン コンテンツであると想定しています) に表示される場合があります。#rightその場合は、元のソースでそれらを交換します。これは、通常、ドキュメント ソースの上位にメイン コンテンツを配置することをお勧めするためです。次に、フロートを使用して、タブレット/デスクトップ バージョンの列を作成します。Bootstrap には、このためのクラス名もあります。

<div class="row-fluid">
   <div id="right" class="span9 pull-right">
   <div id="sidebar1" class="span3">
于 2013-09-09T15:13:44.107 に答える