Looking for a solution in Bootstrap 4 that mirrors the offset feature in Bootstrap 3, but pushes a div to the left instead of right. Need a way to have multiple dynamic divs within a row, where one div is pushed to the left on its own row without the need for an empty spacer div.
<style>
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
</style>
<div class="container">
<div class="row">
<div class="col col-3 offset-3">
1st of 3
</div>
<div class="col col-3">
2nd of 3
</div>
<div class="col col-3">
3rd of 3
</div>
<div class="col col-3">
1 of 1
</div>
<div class="col col-9">
</div>
<div class="col col-3">
1st of 3
</div>
<div class="col col-3">
2nd of 3
</div>
<div class="col col-3">
3rd of 3
</div>
</div>
</div>
Current workaround involves adding extra div as a space filler, looking for a more efficient way to achieve desired layout with Bootstrap classes only.