I want to design a grid that covers the whole screen with 3 columns (left, middle, right)
- Left: This column should only be displayed on large views and occupy 16.6% of the screen (2/12)
- Middle: This column should always be visible. It should take up 75% (9/12) of the screen on <= mid-size view. And 66.6% (8/12) on large views
- Right: This column should always be visible. It should take up 16.6% (2/12) of the width on large view and 25% (3/12) on <= mid-size view
Here is my HTML markup:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 d-md-none bg-dark text-white">
<h1>LEFT</h1>
<p>This column should only be visible on large views and should be 16.6% of the screen (2/12)</p>
</div>
<div class="col-lg-8 col-md-9 bg-danger text-white">
<h1>MIDDLE</h1>
<p>This column should always show up. It should cover 75% (9/12) of the screen on <= mid-size view. And 66.6% (8/12) on large views</p>
</div>
<div class="col-lg-2 col-md-3 bg-warning">
<h1>RIGHT</h1>
<p>This column should always be visible. It should cover 16.6% (2/12) of the width on large views and 25% (3/12) on <= mid-size view</p>
</div>
</div>
</div>
Here is a link to my code on Codeply:
The class d-md-none doesn't seem to work properly. I expect the column to be hidden in small views but visible on larger views.
How can I fix this issue?