How to properly display bootstrap columns on Safari?

I have a landing page that contains six hero images. I have it set up to display three images per row, in two rows. This works fine on Chrome, Firefox, IE, Opera, but not on Safari (10.1). Instead of the neat rows, the first row has two images, the second three, and the third one. Here is my erb file:

<section class="grouping">
    <div class="wrapper grouping">
        <div class="intro-content grouping row">
            <% flash.each do |key, value| %>
                <div class="alert alert-<%= key %>" role="alert">
                    <%= value %>
                </div>
            <% end %>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("news.jpg"), articles_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "News", articles_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("Our People.JPG"), support_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Peer Support", support_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("training.jpg"), training_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Training", training_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("calendar.jpg"), calendar_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Calendar", calendar_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("about.jpg"), resources_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Trans Resources", resources_path, class: 'landing-link' %></h4>
            </div>
            <div class="landing-image-container col-xs-12 col-sm-4">
                <%= link_to image_tag("Get Involved.JPG", id: 'involved-image'), involved_path, class: 'image-link' %>
                <h4 class="landing-headings text-centered"><%= link_to "Get Involved", involved_path, class: 'landing-link' %></h4>
            </div>
        </div>
    </div>
</section>

I know that the specification for Bootstrap says that you should wrap a row in a .container, I've tried this setup with .container and .container-fluid, nothing changes except some slight padding on the left and right. The .grouping class is a clearfix hack:

.grouping:before,
.grouping:after {
  content: " ";
  display: table; 
}
.grouping:after {
  clear: both; 
}

Here's the css for .wrapper and .intro-content:

.wrapper {
  width:100%;
  margin: 9em auto 0;
  padding-bottom: 9em;
  box-shadow: 0 8px 1em rgba(0, 0, 0, 0.1);
}

.intro-content  {
  margin: 4em auto;
  max-width: 1100px;
  width: 90%;
}

I've messed with these settings quite a bit, reducing all padding and margin to 0 and things like that, but the problem remains. Googling this has provided a few hacky solutions, none of which worked.