Css 带flexbox的响应柱

我在理解如何让这些列在这个flexbox布局中堆叠时遇到了一些困难，下面是我的代码

<div class="team-row">
    <div class="wrap">
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Tommy Shrader" class="member-pic">
            <h3 class="member-title">Tommy Shrader</h3>
            <div class="member-position">
                <p>President and CEO</p>
            </div>
        </div>
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Zachery Reed" class="member-pic">
            <h3 class="member-title">Zachery Reed</h3>
            <div class="member-position">
                <p>Vice President of Operations</p>
            </div>
        </div>
        <div class="team-member">               
            <img src="http://placehold.it/270x270" alt="Mickie Breeding" class="member-pic">
            <h3 class="member-title">Mickie Breeding</h3>
            <div class="member-position">
                <p>Office Administration</p>
            </div>
        </div>
    </div>
</div>

.team-row {
    width: 100%;
    &:nth-of-type(odd) {
        background-color: #f7f7f8;
    }
    .wrap {
        padding: 80px 0 40px;
        display: flex;
        justify-content: space-between;
        @media (max-width: 667px) {
            flex-direction: column;
            justify-content: space-around;
        }
    }
    .team-member {
        width: 27.06%;
        color: #444;
        text-align: center;
        .member-pic {
            margin-bottom: 20px;
        }
        .member-title {
            font-family: 'Abolition Regular';
            font-size: 24pt;
            font-style: normal;
            font-weight: normal;
            margin: 0;
            margin-bottom: 10px;
        }
        .member-position {
            p {
                margin: 0;
                font-size: 15pt;
            }
        }
    }
}

汤米·施拉德
总裁兼首席执行官

扎奇里·里德
运营副总裁

米奇育种
办公室管理

.队排{
宽度：100%；
&：第n种类型（奇数）{
背景色：#f7f7f8；
}
.包裹{
填充：80px 0 40px；
显示器：flex；
证明内容：之间的空间；
@介质（最大宽度：667px）{
弯曲方向：立柱；
证明内容：周围的空间；
}
}
.团队成员{
宽度：27.06%；
颜色：#444；
文本对齐：居中；
.成员pic{
边缘底部：20px；
}
.会员名称{
字体系列：“废除常规”；
字号：24pt；
字体风格：普通；
字体大小：正常；
保证金：0；
边缘底部：10px；
}
.成员职位{
p{
保证金：0；
字体大小：15磅；
}
}
}
}

我还设置了一个jsbin，这样您就可以看到我已经在尝试做什么了

我试图让这三个项目堆叠在一起，当屏幕达到一定宽度时，像正常情况一样在包装器中居中

---

我对flexbox布局还是有点陌生，所以我在搜索和理解如何实现这一点时遇到了困难。

如前所述，列已经堆叠，但您表示希望它们居中

然后您需要使用

对齐项目

    @media (max-width: 667px) {
        flex-direction: column;
        justify-content: space-around;
        align-items:center;
    }
}

---

我觉得它们堆叠得很好……到底是什么不起作用？对不起，我想说我希望它们也居中。修正了这个问题。