如何使用CSS更改移动设备中堆积列的顺序
布鲁斯·班迪
关于在移动设备中订购列，我有一个CSS问题。目前，我的网站有4列，在移动视图中，它们彼此堆叠。这些列具有一类文本列或一类图像列。
以下是当前在台式机和移动设备上的外观图像，您可以看到我只想在移动设备上更改顺序。
我的问题是如何使用CSS更改订单以实现所需的移动结果？我假设我将需要在列中添加额外的类，然后使用它来帮助进行排序。我知道我需要将@media添加到CSS中，以确保它仅在手机和平板电脑中发生。
阿马里什SM
您可以定位单个项目，并使用该属性更改它们在视觉顺序中的显示位置order。
参考：https : //developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
演示：
.col {
display: flex;
flex-wrap: wrap;
}
.col div {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 200px;
border: 2px solid green;
font-size: 18px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.col div:nth-child(1) {
order: 1;
}
.col div:nth-child(2) {
order: 2;
}
.col div:nth-child(3) {
order: 4;
}
.col div:nth-child(4) {
order: 3;
}
}<div class="col">
<div class="text">.text column</div>
<div class="img">.image column</div>
<div class="text">.image column</div>
<div class="img">.text column</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Bootstrap 4 - 更改移动设备中 5 列布局的顺序
- 2
引导网格-在移动设备中更改顺序
- 3
在移动设备中更改容器的顺序
- 4
引导程序：更改移动设备上全角列的顺序
- 5
Bootstrap：更改移动设备上全角列的顺序
- 6
在移动设备上如何更改两个div的顺序？
- 7
如何隐藏移动设备中的元素？的CSS
- 8
如何使用CSS绘制移动设备边缘？
- 9
是否可以使用html css更改移动设备中的表结构？
- 10
如何使用ggplot2更改堆积条形图的顺序和配色方案？
- 11
在移动设备上以正确的顺序显示列
- 12
在移动设备上以正确的顺序显示列
- 13
引导列在移动设备上的顺序？
- 14
在带有行的移动设备上显示时，Bootstrap响应式网格的列顺序更改？
- 15
如果设备是移动设备，如何更改网页上的链接？HTML / Javascript / CSS
- 16
如果设备是移动设备，如何更改网页上的链接？HTML / Javascript / CSS
- 17
使用javascript（或css，通过鼠标（或在移动设备中触摸））更改元素的大小，而不考虑jquery ui
- 18
如何防止移动设备调整大小并使用正确的CSS文件
- 19
对于3列CSS布局，如何更改HTML代码中div的顺序？
- 20
对于3列CSS布局，如何更改HTML代码中div的顺序？
- 21
Twitter Bootstrap 3：在“移动设备”屏幕中查看时自定义列堆栈顺序
- 22
在移动模式下更改网格列顺序
- 23
CSS列数-更改顺序
- 24
更改设备方向后如何移动对象？
- 25
如何使用CMD在变量中写入可移动设备的字母？
- 26
网站宽度在移动设备中已更改
- 27
如何使用ggplot2反转堆积面积图中的堆积顺序
- 28
使用VBA在Excel中反堆积列
- 29
如何使用方法链更改熊猫数据框中的列顺序？
我来说两句