BOOTSTRAP：在移动设备上重新排列不同尺寸面板的顺序答案

【问题标题】：BOOTSTRAP: rearrange order of different sized panels on mobileBOOTSTRAP：在移动设备上重新排列不同尺寸面板的顺序
【发布时间】：2016-01-27 20:18:59
【问题描述】：

我对如何在移动设备上重新排列面板有疑问。面板有不同的尺寸。大屏页面截图请看附件（col-lg）：

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

当我在移动设备 (col-xs) 上查看它时，我得到：
第一个面板
第四面板
第七面板
第二面板
第五小组
第三面板
第六组

请看手机屏幕的图片：

我想重新排列移动（col-xs）中面板的位置，所以排列是这样的：
第一个面板
第二面板
第三面板
第四面板
第七面板
第五小组
第六面板

请查看我的代码的代码 sn-p

<!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="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>
<!-- 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">
				<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">
				<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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

Link for Grid options

Link for Grid System

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

【讨论】：

感谢您回答我的问题。我已经阅读了这些链接，但我认为它们没有解决我的问题，

【解决方案2】：

如果您想要在大型设备和超小型设备中进行两组不同的排列，则需要有两组不同的代码（因为您要完全更改“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>

【讨论】：

感谢您回答我的问题，非常感谢。我不想为不同的设备添加两次相同的代码，因为我会不时修改内容，而且我认为如果我要更改 2 个代码，将来会很难这样做。我也试过推拉，但没有运气。安排变得很奇怪。

【解决方案3】：

如果它适合你的设计，你可以试试这样的东西

<!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>

【讨论】：

感谢您回答我的问题。对此，我真的非常感激。我试过这个，但我有不同大小的面板，我不希望在大屏幕上的行之间有任何上部空间（就像描述中的第一个附件一样）。

【解决方案4】：

我建议将所有.panel 元素按降序添加到.col-md-12 div。这将为您在中等大小的屏幕上提供所需的布局。

在默认引导程序col-lg-* 断点处添加针对大尺寸屏幕的媒体查询，在1200px 处使用弹性盒布局并将flex-direction 设置为row 将按照从左到右的降序处理所需的布局在大屏幕上。

这是一个例子。您可能还想查看can i use flexbox。
对于不支持 flexbox 的浏览器，互联网上有很多备用解决方案。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

@media (min-width: 1200px) {
  .lg-flex-row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .panel {
    flex: 0 1 32%;
  }
}

<div class="container">
  <div class="row">
    <!-- 1st panel -->		
    <div class="col-md-12 lg-flex-row">

      <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>

      <!-- 2n 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>

      <!-- 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>

      <!-- 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
        </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
        </div>
      </div>

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

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

【讨论】：

您好，感谢您回答我的问题。但是对于大屏幕，我不希望行之间有任何空格，就像我在第一张图片上附加的那样（例如，第一个面板和第四个面板之间没有空格）