Unfortunately, there doesn\'t seem to be a good way to manage vertical spacing between columns that transition from a horizontal stack to a vertical stack at certain breakpo
see snippet below or jsfiddle
it will work regardless how many cols you have or rows
first ( on big screen ) all rows have margin-bottom except the last one
then on medium screen , the rows won't have any margin and the cols will all have margin-bottom except the last col from the last row
.row {
margin-bottom:30px;
}
.row:last-child{
margin-bottom:0;
}
.row [class*="col-"] {
border:1px solid red;
}
@media only screen and (max-width: 768px) {
.row {
margin:0
}
.row [class*="col-"] {
margin-bottom:30px;
}
.row:last-child [class*="col-"]:last-child{
margin-bottom:0;
}
}
hey
col 1
col 2
col 3
col 4
col 5
col 6