See http://stackoverflow.com/questions/42174385/safari-and-bootstrap-4-automatic-grid-breaks for example.

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with specific browser and OS details.

I made an example available - see above. I don't have the time for more - sorry. I included the OS and the Browser in question in the first post.

Created JSBin

Reproduced this issue on the following browsers:

iOS 7, Safari 7
iOS 8, Safari 8
iOS 7 & 8, Chrome 47

Turns out this is flexbug 11, where Safari doesn't wrap flex items properly. As I understand it, Safari uses different calculations for determining how to wrap flex items. The only workaround is using flex-basis to size the columns :. In this case, you'd need to add:

.col {
  flex: 1 0 50%; // where 50% is the intended size of the items
}

This is the same problem #21620 faces as well. Digging into even more, a border: 1px solid transparent on the .col will also fix this. Will work on a docs update to suggest these in context.

I got this as well. Site: danherzig.com. Happened on iOS browsers. Don't have an iPhone but got these screenshots. Fixed by reverting to prior columns (col-sm-12 and col-md-6). So the official fix was adding an invisible border?

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

I'm on 4.0.0-beta.2 and am still seeing the problem on ios 8 safari. Will upgrading to the latest version of bootstrap 4 fix the problem or will I still need a workaround? If workaround needed, is it documented on the getbootstrap site?

@pimisi suggestion wasn't working for me, but it worked changing it to display: block;

Here's the solution:
#9282 (comment)

Worked like a charm!

The border didn't work for me, it changed nothing on ios 10, and the explicit flex is too restrictive. What I've done is adding <div class="w-100" id="BugFix"></div> where I wanted the new line to be, and the following style to ensure it does not happen on wider viewports.

@media (min-width: 576px) {
  #BugFix {
    display: none;
  }
}