Question

我正在开发一个响应式网站，我希望在响应时更改html div顺序。有没有办法在调整浏览器大小后更改html顺序？ insertBefore，insertAfter和.replaceWith（）在这种情况下没用。

桌面html

<div class="list-wrapper">
    <div class="col c1">column 1</div>
    <div class="col c2">column 2</div>
    <div class="col c3">column 3</div>
    <div class="col c4">column 4</div>
    <div class="col c5">column 5</div>
</div>

响应式HTML

<div class="list-wrapper">
    <div class="col c1">column 1</div>
    <div class="col c5">column 5</div>
    <div class="col c2">column 2</div>   
    <div class="col c3">column 3</div>
    <div class="col c4">column 4</div>

</div>

Answer 1

使用.resize()方法：JQUERY

$( window ).resize(function() {

    console.log( 'Handler for .resize() called.' );
    var newC2 = $( ".col c2" ).replaceWith( $(".col c5") );
    var newC3 = $( ".col c3" ).replaceWith( newC2 );
    var newC4 = $( ".col c4" ).replaceWith( newC3 );
    $( ".col c5" ).replaceWith( newC4 );

});

Answer 2

请注意，对于现代浏览器，您只需使用CSS即可完成此操作（ using flexible boxes ）

.list-wrapper{display:flex;flex-direction:column}

.c1{order:1}
.c2{order:3}
.c3{order:4}
.c4{order:5}
.c5{order:2}

（您将需要使用供应商前缀使其适用于所有浏览器）
演示 http://jsfiddle.net/Xdn2G/2/

Answer 3

  Posting below the working html.

  <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .list-wrapper { float:left; width:100%; border:1px solid #000}
    .list-wrapper .col {float:left; border:1px solid #f00; width:18%;}

    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script language="javascript" type="text/javascript">

    $(document).ready(function(){

    var $modules = $('.list-wrapper .col');
    var order    = [1,3,4,0,2];

    var elements = [];
    $.each(order, function(i, position) {
        elements.push($modules.get(position));
    });

    $('.list-wrapper').html(elements); 
    });

    </script>
    </head>

    <body>

    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>


    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>

    <div class="list-wrapper">
        <div class="col c1">column 1</div>
        <div class="col c2">column 2</div>
        <div class="col c3">column 3</div>
        <div class="col c4">column 4</div>
        <div class="col c5">column 5</div>
    </div>
    </body>
    </html>

如何更改div顺序，同时使其响应？

3 个答案: