I'm currently trying to implement Bootstrap's documentation in order to create a layout where one column is wider than the other two. You can find my JSFiddle at the end of this post.
If you'd like more information, you can check out the official Bootstrap documentation here.
My goal is to achieve the following layout with 3 columns, but only for large devices: https://i.sstatic.net/PTWcB.png
After experimenting with the code snippet below:
<div class="row no-lf-margin">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 bg-warning">
1
</div>
<div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 bg-danger">
2
</div>
<div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 bg-secondary">
3
</div>
</div>
I found that the first column (orange) was taking up too much space and the third column (grey) wasn't quite right either. It seems like I need something like col-xl-2.5 for the first column and col-xl-1.5 for the third one.
Note: The layout works fine on other screen sizes because they stack due to col-md-12 and col-sm-12.
In an attempt to follow the documentation more closely, I tried the snippet below:
<div class="row no-lf-margin">
<div class="col bg-warning">
1
</div>
<div class="col-7 bg-danger">
2
</div>
<div class="col bg-secondary">
3
</div>
</div>
The result was better for the first column (orange), but the third column (grey) was still not quite right. Additionally, all columns were now displayed next to each other on all screen sizes as there was no mention of col-md-12 or col-sm-12.
Next, I attempted to combine the two approaches:
<div class="row no-lf-margin">
<div class="col col-md-12 col-sm-12 bg-warning">
1
</div>
<div class="col-7 col-md-12 col-sm-12 bg-danger">
2
</div>
<div class="col col-md-12 col-sm-12 bg-secondary">
3
</div>
</div>
Unfortunately, this resulted in all columns being stretched to col-12 and stacking on top of each other.
JSFiddle containing both versions and desired outcome: https://jsfiddle.net/gcdn3str/