Flexbox wraps last column of the first row in Safari

Question

The last column of the first row is wrapped to the next line when viewing in Safari, and some other iOS based browsers.

Safari:

Answer 1

Bootstrap 4 have issues with display: block; property when set either from css or from javascript on the .row class. I figured a solution for this Just create a class as:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

And then apply this class when you want to display the row.