Javascript 引导：重新排列移动设备上不同大小面板的顺序_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导：重新排列移动设备上不同大小面板的顺序

javascript jquery html css twitter-bootstrap

Javascript 引导：重新排列移动设备上不同大小面板的顺序,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我对如何在手机上重新排列面板有问题。面板有不同的尺寸。请参见附件，以获取大屏幕页面的屏幕截图（col lg）：编辑：大屏幕布局是可以的，因为我不希望行与行之间有任何空格，因为面板的高度不同当我在手机上查看它时（col-xs），我得到：第一个面板第四面板第七面板第二面板第五面板第三面板第六小组请参见手机屏幕的图片：我想重新排列mobile（X列）中面板的位置，因此排列如下：第一个面板第二面板第三面板第四面板第七面板第五面板第六面板请看我的代码片段

我对如何在手机上重新排列面板有问题。面板有不同的尺寸。请参见附件，以获取大屏幕页面的屏幕截图（col lg）：

编辑：大屏幕布局是可以的，因为我不希望行与行之间有任何空格，因为面板的高度不同

当我在手机上查看它时（col-xs），我得到：
第一个面板
第四面板
第七面板
第二面板
第五面板
第三面板
第六小组

请参见手机屏幕的图片：

我想重新排列mobile（X列）中面板的位置，因此排列如下：
第一个面板
第二面板
第三面板
第四面板
第七面板
第五面板
第六面板

请看我的代码片段


第一
第一个面板

第一个面板

第一面板
第四
第四面板

第四面板

第四面板

第四面板

第七
第七面板

第七面板

第七面板

第七面板

第二
第二面板

第二面板

第二面板

第二面板

第二面板

第二小组
第五
第五面板

第五面板

第五面板

第五面板

第三
第三面板

第三面板

第三面板
第六
第六面板

第六面板

第六面板

第六面板

请遵循引导网格系统和选项。我认为使用它可以解决你的问题

设备有预定义的大小。因此，您可以使每个div等所有设备兼容。

如果您想要在大型设备和超小型设备中使用两组不同的排列方式，则需要两组不同的代码（因为您要完全更改“div”的顺序，网格系统将不会有任何帮助。）

在引导中，您可以拉动或推动列。但不能基于设备移动行

对于您想要的规范，您可以做的是使用可见性过滤添加相同的代码两次-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
        crossorigin="anonymous">
    </head>
    <body>
    <div class="container">

<!-- Only for large devices, will be visible only in large devices --> 
<!-- 1st panel -->      
            <div class="col-lg-4 hidden-md hidden-sm hidden-xs">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">4th</h3>
                  </div>
                  <div class="panel-body">
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                  </div>
                </div>          
<!-- 7th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">7th</h3>
                  </div>
                  <div class="panel-body">
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                  </div>
                </div>
            </div>


<!-- 2nd panel -->      
            <div class="col-lg-4 hidden-md hidden-sm hidden-xs">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">2nd</h3>
                  </div>
                  <div class="panel-body">
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel    
                  </div>
                </div>
<!-- 5th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">5th</h3>
                  </div>
                  <div class="panel-body">
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                  </div>
                </div>
            </div>

<!-- 3rd panel -->      
            <div class="col-lg-4 hidden-md hidden-sm hidden-xs">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">3rd</h3>
                  </div>
                  <div class="panel-body">
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel  
                  </div>
                </div>
<!-- 6th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">6th</h3>
                  </div>
                  <div class="panel-body">
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                  </div>
                </div>
            </div>  

<!-- Only for extra small devices, will be visible only in mobile device -->


            <div class="col-xs-12 hidden-lg hidden-md hidden-sm">       
<!-- 1st panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">4th</h3>
                  </div>
                  <div class="panel-body">
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                    4th panel<br>
                  </div>
                </div>          
<!-- 7th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">7th</h3>
                  </div>
                  <div class="panel-body">
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                    7th panel<br>
                  </div>
                </div>

<!-- 2nd panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">2nd</h3>
                  </div>
                  <div class="panel-body">
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel    
                  </div>
                </div>
<!-- 5th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">5th</h3>
                  </div>
                  <div class="panel-body">
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                  </div>
                </div>

<!-- 3rd panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">3rd</h3>
                  </div>
                  <div class="panel-body">
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel  
                  </div>
                </div>
<!-- 6th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">6th</h3>
                  </div>
                  <div class="panel-body">
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                  </div>
                </div>
            </div>

    </div>
    </body>
</html>


第一
第一个面板

第一个面板

第一面板
第四
第四面板

第四面板

第四面板

第四面板

第七
第七面板

第七面板

第七面板

第七面板

第二
第二面板

第二面板

第二面板

第二面板

第二面板

第二小组
第五
第五面板

第五面板

第五面板

第五面板

第三
第三面板

第三面板

第三面板
第六
第六面板

第六面板

第六面板

第六面板

第一
第一个面板

第一个面板

第一面板
第四
第四面板

第四面板

第四面板

第四面板

第七
第七面板

第七面板

第七面板

第七面板

第二
第二面板

第二面板

第二面板

第二面板

第二面板

第二小组
第五
第五面板

第五面板

第五面板

第五面板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
        crossorigin="anonymous">
    </head>
    <body>
    <div class="container">

<!-- 1st panel -->      
<div class="row">
            <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">1st</h3>
                  </div>
                  <div class="panel-body">
                    1st panel<br>
                    1st panel<br>
                    1st panel
                  </div>
                </div>
                        </div>
    <div class="col-lg-4">
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">2nd</h3>
                  </div>
                  <div class="panel-body">
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel<br>
                    2nd panel    
                  </div>
                </div>  
    </div>
<!-- 7th panel -->  <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">3rd</h3>
                  </div>
                  <div class="panel-body">
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel<br>
                    3rd panel<br>
                  </div>
                </div>
</div>
            </div>
<div class="row">

                <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">4th</h3>
                  </div>
                  <div class="panel-body">
                    4th panel<br>
                    4th panel<br>
                    4th panel
                  </div>
                </div>
                        </div>
    <div class="col-lg-4">
<!-- 4th panel -->      
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">5th</h3>
                  </div>
                  <div class="panel-body">
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                    5th panel<br>
                  </div>
                </div>  
    </div>
<!-- 7th panel -->  <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">6th</h3>
                  </div>
                  <div class="panel-body">
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                    6th panel<br>
                  </div>
                </div>
</div>
</div>
<div class="row">

                <div class="col-lg-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">7st</h3>
                  </div>
                  <div class="panel-body">
                    7th panel<br>
                    7th panel<br>
                    7th panel
                  </div>
                </div>


</div>

        </div>          


</body>
</html>