响应式Web设计：包装器DIV中的内部DIV-希望内部DIV在移动设备上彼此堆叠

Question

I would like the inner div's left and right to be centered in the wrapper div at all times, and when the device screen is less than 600 px, the right inner div to go below the left inner div.

I have made many attempts to figure it out, but to no avail yet. All my code is on jsfiddle:

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

This is my html code:

<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>

This is my css code:

#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

Try using flex-direction

updated 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;
    }
}

Answer 2

只是交换display的的#wrap从flex为纯block中移动的查询： https://jsfiddle.net/vdwz3csp/8/