javascript - Bootstrap : rearrange order of different sized panels on mobile-6ren

javascript - Bootstrap : rearrange order of different sized panels on mobile

转载作者：行者123 更新时间：2023-11-28 03:03:58

27

4

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

编辑:大屏幕布局没问题，因为我不希望行之间有任何空格，因为面板的高度不同。

当我在移动设备 (col-xs) 上查看它时，我得到:
第一版
第四版
第七版
第二版
第五版
第三版
第六幅

请查看手机屏幕的图像:

我想重新排列移动面板的位置(col-xs)，所以排列是这样的:
第一版
第二版
第三版
第四版
第七版
第五版
第六版

请查看我的代码片段

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

最佳答案

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

Link for Grid options

Link for Grid System

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

关于javascript - Bootstrap : rearrange order of different sized panels on mobile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33384614/

27

4

0

文章推荐： python - 如何使用正则表达式从一个部分中查找选项值

文章推荐： html - 如何选择滚动条并更改CSS？

文章推荐： javascript - 粘性子菜单的起点

文章推荐： javascript - 如果选中其他复选框，则禁用复选框

size - ValueError : Target size (torch. Size([16])) 必须与输入大小相同 (torch.Size([16, 1]))
ValueError Traceback (most recent call last) in 23 out
CSS Percent size specifier sizing element to more than specified size
在 CSS 中，我从来没有真正理解为什么会发生这种情况，但每当我为某物分配 margin-top:50% 时，该元素就会被推到页面底部，几乎完全消失这一页。我假设 50% 时，该元素将位于页面的中间位
neural-network - ValueError : Target size (torch. Size([1000])) must be the same as input size (torch.Size([1000, 1]))
我正在尝试在 pyTorch 中训练我的第一个神经网络(我不是程序员，只是一个困惑的化学家)。网络本身应该采用 1064 个元素向量并用 float 对它们进行评级。到目前为止，我遇到了各种各样的
c# - 数组移位/错误索引/i = [x+y*size+z*size*size]
我有一个简单的问题。如何在 3 个维度上移动线性阵列？这似乎太有效了，但在 X 和 Y 轴上我遇到了索引问题。我想这样做的原因很简单。我想创建一个带有 block 缓冲区的体积地形，所以我只需要在视口
python - 如何解决与输入大小 (torch.Size([1])) 不同的 UserWarning : Using a target size (torch. Size([]))？
我正在尝试运行我购买的一本关于 Pytorch 强化学习的书中的代码。代码应该按照本书工作，但对我来说，模型没有收敛，奖励仍然为负。它还会收到以下用户警告: /home/user/.local/li
python - PyTorch ValueError : Target size (torch. Size([64])) 必须与输入大小相同 (torch.Size([15]))
我目前正在使用 this repo使用我自己的数据集执行 NLP 并了解有关 CNN 的更多信息，但我一直遇到有关形状不匹配的错误: ValueError: Target size (torch.Si
objective-c - UIScrollView.size = view.size - allAdditionalBars.size(如 TabBar 或 NavigationBar)以编程方式
UIScrollView 以编程方式设置，请不要使用 .xib 文件发布答案。我的 UIScrollView 位于我的模型类中，所以我希望代码能够轻松导入到另一个项目中，例如。适用于 iPad 或旋
css - Bootstrap 4 : How Can I Set $font-size-base for Different Monitor Sizes using Responsive Font Sizing?
我在我的 Ruby on Rails 应用程序(版本 4.3.1)中使用 Bootstrap gem。我最近发现了响应式字体大小功能 (rfs)。根据 Bootstrap 文档，它刚刚在 4.3 版中
Android App开发错误: "Bad XML block: header size 60 or total size 3932356 is larger than data size 0"
这个问题不太可能帮助任何 future 的访客；它仅与一个小地理区域、一个特定时刻或一个非常狭窄的情况相关，而这些情况通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用，visit the
scala - size 和 size 的区别是
size 之间的语义区别是什么？和 sizeIs ?例如， List(1,2,3).sizeIs > 1 // true List(1,2,3).size > 1 // true Luis 在 c
javascript - 从子元素中删除 Size 和 font-size
我想从 div 中删除一些元素属性。我的 div 是自动生成的。我想遍历每个 div 和子 div，并想删除所有 font-size (font-size: Xpx)和 size里面font tag
python - 使用 self.size = size 时语法无效
super ，对 Python 和一般编程 super 新手。我有一个问题应该很简单。我正在使用一本使用 Python 3.1 版的 python 初学者编程书。我目前正在写书中的一个程序，我正在学
size - native 库 : change thumbnail default size
我无法从 NativeBase 更改缩略图的默认大小。我可以显示默认圆圈，即小圆圈和大圆圈，但我想显示比默认大小更大的圆圈。这是我的缩略图代码: Prop 大小不起作用，缩略图仍然很小。我的 Na
pytorch - pytorch中张量torch.Size([])和torch.Size([1])的形状差异
我是pytorch的新手。在玩张量时，我观察到了两种类型的张量- tensor(58) tensor([57.3895]) 我打印了它们的形状，输出分别是 - torch.Size([]) torch
Docker 镜像 : virtual size vs real size
这是我的 docker images 命令的输出: $ docker images REPOSITORY TAG IMAGE ID CREATED
java - 为什么使用 "s = --size"而不是 "s = size"？
来自 PriorityQueue 的代码: private E removeAt(int i) { assert i >= 0 && i < size; modCount++;
c++ - sizeof() : the size of a class isn't the same as the size of it's members together?
首先，在我的系统上保留以下内容:sizeof(char) == 1 和 sizeof(char*) == 4。很简单，当我们计算下面类的总大小时: class SampleClass { char c
iphone - cocos2d content.size、boundingBox 和 size
我正在编写一个游戏来查找 2 个图像之间的差异。我创建了 CCSprite 的子类 Spot。首先我尝试创建小图像并根据其位置添加自身，但后来我发现位置很难确定，因为很难避免 1 或 2 个像素的偏移
javascript - Tumblr:photoUrl-(size) - size depending on class？
我有一个 Tumblr Site每个帖子的宽度由标签决定。如果一篇文章被标记为 #width200，CSS 类 .width200 被分配。问题是，虽然帖子的宽度不同，但它们都使用主题运算符加载相
c++ - 为什么动态分配的数组大小在插入时是初始数组的 2*size，而不是 size+1？
这个问题在这里已经有了答案: What is the ideal growth rate for a dynamically allocated array? (12 个答案) 关闭 8 年前。我

首页

博学

6Ren·AI

商城

javascript - Bootstrap : rearrange order of different sized panels on mobile