Say, you have two divs. Left and right.
On desktop, you want sequence
Left - Right
But, on mobiles, you want:
Right - Left
This can be achieved through CSS properties.
Code:
Note: Use media queries appropriately.
On desktop, you want sequence
Left - Right
But, on mobiles, you want:
Right - Left
This can be achieved through CSS properties.
Code:
Note: Use media queries appropriately.
<!DOCTYPE>
<html>
<head>
<title>Re ordering of divs using CSS.</title>
</head>
<body>
<div class="parent">
<div class="left" style=" height: 100px; background-color: grey; float: left;"><h1>Left</h1></div>
<div class="right" style="height: 100px; background-color: black; float: left;"><h1>Right</h1></div>
</div>
<style>
.parent div h1 {color: #ffffff;}
.parent {width: 100%; display: flex; flex-direction: column;}
.left {padding: 10px; width: 100%; order: 2;}
.right {padding: 10px; width: 100%; order: 1}
</style>
</body>
</html>
Without using above solution:
After using above solution:
Without using above solution:
After using above solution:
Any suggestions/comments are most welcome.
No comments:
Post a Comment