0

I am making a header navigation in which I have three columns left, middle and right, in mobile view I need left and right column in 1 row and middle column should swipe in next row.

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>

As per image I need Green block in next row on mobile view.enter image description here

user2147423
  • 105
  • 2
  • 8

1 Answers1

1

use order property in your media query for the green column to move to last , bootstrap has built in utilities for order

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

Another question for same topic Order columns through Bootstrap4

Mohammed Metwally
  • 383
  • 2
  • 11