Bootstrap 4 columns not working properly on Safari

I made a website with Bootstrap 4 and everything works fine except auto wrap columns on Safari 10.1.1 on MacOS. When number of columns in a row is equal to 12, then the last column jumps to the new line instead of wrap to previous column. When number of columns is smaller than 12 there is no problem.

For example my top header: <div class="container"> <div class="row"> <div class="col-lg-3">logo</div> <div class="col-lg-9">menu</div> </div> </div> On Chrome and Firefox logo and menu are in one line but on Safari menu starts in a new line (screen from Safari): https://imgur.com/a/xTv9m

This looks like flexbug#11 and when I’m setting flex-basis to the columns the problem still occurs. I tried also with the border 1px transparent workaround but also without success.

This issue appears also on another sections in my website where I used 12 columns in a row.

[pimisi]

In my case I overrode the class .row:before, row:after, and set display: inline-block; That did the trick and did not affect Chrome and Firefox

[gilek555]

Ok, I found what generate problem. I was delete this line .row:before { content: " "; }