Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks?
This is my current approach:
<div class="container">
<div class="row">
<div class="col-md-8 d-none d-md-block left-panel">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</div>
<div class="col-md-4 d-none d-md-block right-sidebar">Right Sidebar
<div class="widget1">Widget 1 </div>
<div class="widget2">Widget 2 </div>
<div class="widget3">Widget 3 </div>
</div>
</div>
</div>
.left-panel {
float: left;
background: gray;
width: 400px;
}
.box1,
.box2,
.box3 {
width: 200px;
background: white;
height: 50px;
border: 1px solid red;
margin-bottom: 20px;
}
.right-sidebar {
background: pink;
float:left;
width: 100px;
}
https://jsfiddle.net/p684mz2u/
Bootstrap 4 is being utilized for this project.
What I'm aiming for is to rearrange the layout so that Widget 1 appears above Box 1, Widget 2 between box 1 and 2, and Widget 3 between box 2 and 3 within the right sidebar.
I understand that I could simply hide Widget 1 on desktop and tablet by using display:none and then duplicating the code in the desired order for mobile. However, I want to explore achieving this using CSS tricks without duplicating the existing code.