html - 响应式网页设计 : Inner DIV's in a wrapper DIV - Want the inner DIV's to stack on top of each other on mobile devices

Question

我希望内部 div 的 left 和 right 始终位于包装 div 的中心，当设备屏幕小于 600 像素时，right 内部 div 位于 left 内部 div 下方。

我试过很多次，但都无济于事。我所有的代码都在 jsfiddle 上:

https://jsfiddle.net/vdwz3csp/5/

这是我的 html 代码:

<div id="wrap">
    <div id="left">
        <span>
            <img
                class="wp-image-440 size-medium aligncenter"
                src="http://www.generalgreenestudios.com/wp-content/uploads/2015/09/danielgreene-circle-300x300.png"
                alt="Daniel Greene"
                width="200"
                height="200" />
        </span>

        <span class="about-desc">
            <p style="text-align: center;">
                <strong>Daniel Greene</strong>
            </p>
            <p style="text-align: center;">
                Cinematographer/Editor
            </p>

            <hr style="border-color: #333333;" />
            <p style="text-align: justify;">
                Text here
            </p>
        </span>
    </div>

    <div id="right">
        <span>
            <img
                class="wp-image-435 size-medium aligncenter"
                src="http://www.generalgreenestudios.com/wp-content/uploads/2015/09/alexandriagreene-circle-300x300.png"
                alt="Alexandria Greene"
                width="200"
                height="200" />
        </span>

        <span class="about-desc">
            <p style="text-align: center;">
                <strong>Alexandria Greene</strong>
            </p>
            <p style="text-align: center;">
                Accounts/Client Relations
            </p>

            <hr style="border-color: #333333;" />
            <p style="text-align: justify;">
                Some text goes here
            </p>
        </span>

    </div>
</div>

这是我的CSS代码:

#wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}
#left, #right {
    padding: 20px;
    width:25%;
    min-width:300px;
    float:left;
}
@media screen and (max-width: 600px) {
    #left {
        float:none;
        width:auto;
        margin:0 auto;
    }
    #right {
        float:none;
        width:auto;
        margin:50px auto;
    }
}

Answer 1

尝试使用flex-direction

更新的 fiddle :https://jsfiddle.net/vdwz3csp/7/

#wrap {
    display: flex;
    justify-content: center;
    flex-direction:row;
    width: 100%;
}
#left, #right {
    padding: 20px;
    width:25%;
    min-width:300px;
}
@media screen and (max-width: 600px) {
    #wrap
    {
        flex-direction:column;
    }
}