Columns on iPad beaking incorrectly

[eyedia]

I have a couple 3 column sections that render correctly within cornerstone at the break points and also when I shrink the screen on my computer, however on ipad in landscape and in portrait mode and in both safari and chrome, the last column is breaking under the other two. You can see it on this page: http://fe0.15a.myftpupload.com/audiologists/ (I will add the password for that page) and also on this page: http://fe0.15a.myftpupload.com

Here is a screenshot on the ipad: https://imgur.com/a/Bidgi

These columns are using some code to make them equal heights as provided in this support topic: https://theme.co/apex/forum/t/equal-columns/2952/9
Thank you in advance

[ruenel]

Hello There,

Thanks for writing in! I can confirm that the columns are breaking up. To resolve this, please have your code updates and use this:

/* Making boxes even length - Homepage */
#x-section-3 .x-container,
.x-colophon.top .x-container,
#post-1972 #x-section-9 .x-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
}

#x-section-3 .x-container > .x-column,
.x-colophon.top .x-container > .x-column,
#post-1972 #x-section-9 .x-container  > .x-column {
  height: auto !important;
  float: none;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex: 1 1 5em;
  flex: 1;
}

Please let us know how it goes.