首页 > 解决方案 > 在移动视图的下一行中滑动中心 div

问题描述

我正在制作一个标题导航,其中我有左、中和右三列,在移动视图中我需要 1 行中的左列和右列,中间列应该在下一行滑动。

LeftPanel: <div name="leftPnl" id="leftPnl" data-complex="true" class="panel_dashboard panel-primary_dashboard  undefined leftPnl displayTbl col-lg-4 col-md-4 col-sm-4 col-xs-4 " style=""></div>

CenterPanel: <div name="middletPnl" id="middletPnl" data-complex="true" class="panel_dashboard panel-primary_dashboard  undefined middletPnl col-lg-4 col-md-4 col-sm-4 col-xs-12 " style=""></div>

RightPanel: <div name="RighttPnl" id="RighttPnl" data-complex="true" class="panel_dashboard panel-primary_dashboard  undefined RighttPnl displayTbl col-lg-4 col-md-4 col-sm-6 col-xs-6 " style=""></div>

根据图像,我需要移动视图下一行的绿色块。在此处输入图像描述

标签: htmlcss

解决方案


在您的媒体查询中使用 order 属性将绿色列移到 last ,bootstrap 内置了用于 order 的实用程序

https://www.w3schools.com/cssref/css3_pr_order.asp

同一主题的另一个问题 通过 Bootstrap4 订购列


推荐阅读