Add spacing between vertically stacked columns in Bootstrap 4

Question

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

Answer 1

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