Swipe center div in next row in mobile view

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.

0snoB

I don’t know what you mean by swipe in this context? A swipe is not html or css but usually a js addition.

If you just want the middle item on the next row for smaller screens then flexbox will do that using the order property. I’m assuming from the classes that this is a bootstrap layout so you could do something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#leftPnl{background:blue;}
#middletPnl{background:green;}
#RighttPnl{background:teal;}
#leftPnl,#middletPnl,#RighttPnl{
	min-height:100px/* for testing only*/
}

@media screen and (max-width:767px){

	#leftPnl,#RighttPnl{flex:1 0 50%;max-width:50%;}
	#middletPnl{flex:1 0 100%;order:3;max-width:100%;}
}

</style>
</head>

<body>

<div class="container my-container">
  <div class="row myRow">
    <div 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">Left Panel</div>
    <div 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 ">Mid Panel</div>
    <div 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 ">Right Panel</div>
  </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

If indeed you are talking about swiping something on mobile then you would need to post the code/plugin you are using for swiping and then we could move the thread to the js forum.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.