在移动视图的下一行中滑动中心div

Question

我正在进行标题导航，其中在左，中和右三列，在移动视图中，我需要在第一行中包含左和右列，而在下一行中应滑动中列。

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>

根据图像，我需要在移动视图的下一行中显示绿色块。

Answer 1

在媒体查询中使用订单属性将绿色列移至最后，引导程序内置了用于订单的实用程序

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

同一主题的另一个问题 Order columns through Bootstrap4