Flexbox wrap in IE11

Question

I wanted to use this codepen that I found, since I just liked the general look of it for displaying short article summaries. https://codepen.io/starise/pen/ZbYPRq

CSS:

body { background: #eee }

.container-fluid { max-width: 1200px; }

header {
    background: #563d7c;
    padding: 2em 1em;
    color: #fff;
    margin-bottom: 2em;
    h1 {
        font-weight: 200;
    }
}

.card {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    img {
        width: 100%;
    }
}

[class*="row"] {
    margin-bottom: 1em;
  justify-content: center;
}

[class*="col-"] {
    background: #efefef;
    border: 1px solid #ddd;
    padding-top: .75rem;
    padding-bottom: .75rem;
    width: 100%;
}

Along with the bootstrap file.

For some reason, the wrapping isn't working in IE11, it looks fine in other browsers, but I can't figure out what part of this IE isn't liking. I've tried applying a few fixes I've seen, but I think I'm just not familiar enough with bootstrap and flexbox to see what the obvious issue might be. If I need to fix this question somehow, let me know, I'm not sure what specifics to include since it's not really my code, but I would like to use it for a piece of a website.

Edit: That does seem similar Michael, but the fixes in there don't seem to be fixing the problem on that Pen. Not sure why.