Web View
Before Change After Change
<html>
<head>
<title>Change Div Order In Mobile View By jQuery.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
padding:20px;
}
#container {
width:100%;
margin: 0 auto;
text-align: center;
}
.display_inline{
border: 2px solid;
width: auto;
display: inline-block;
padding: 150px 100px;
margin: 22px;
font-size: 50px;
color: #fff;
font-family: emoji;
}
#div1{
background:#1a3a5f;
}
#div2{
background:#79286c;
}
@media only screen and (max-width: 600px) {
.display_inline{
width: auto;
display: block !important;
bolder:2px solid red;
padding: 10%;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="container">
<div id="div1" class="display_inline">
<div class="center">
Div One
</div>
</div>
<div id="div2" class="display_inline">
<div class="center">
Div Two
</div>
</div>
</div>
<script type="text/javascript">
function listenWidth( ) {
if (jQuery(window).width() <= 600) {
jQuery("#div2").remove().insertBefore(jQuery("#div1"));
} else {
jQuery("#div2").remove().insertAfter(jQuery("#div1"));
}
}
jQuery(document).ready(function(){
listenWidth();
});
jQuery(window).resize(function() {
listenWidth();
});
</script>
</body>
</html>
According To Question:
#Change Div Position In Mobile
#How To Change Div Position In Responsive
#jQuery Change Order Of Divs
#Change Order Of Divs Responsive
#Div Order Change jQuery
#jQuery Change Column Order
#Javascript Reorder Divs
#Change Div Position By jQuery
No comments:
Post a Comment