Managing vertical spacing between columns that switch from horizontal to vertical at breakpoints can be challenging. While there are solutions available when dealing with forms, applying them to multiple columns wrapping in a row can be tricky. I have attempted a solution suggested but it didn't work as expected.
Explaining my scenario, here is the HTML structure:
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
col 1
</div>
<div class="col-md-4">
col 2
</div>
<div class="col-md-4">
col 3
</div>
<div class="col-md-4">
col 4
</div>
<div class="col-md-4">
col 5
</div>
<div class="col-md-4">
col 6
</div>
</div>
</div>
</body>
https://jsfiddle.net/b74a3kbs/6/
My goal is to have specific spacing between columns in each "row" without any space above the first row or below the last when viewed on medium and larger devices. When columns stack vertically on smaller devices, I aim for consistent spacing between all columns without any extra space above the first or below the last column.
Ideally, the solution should be flexible to accommodate any number of columns within the row, be it 3, 5, 6, or 12.