如何归档此响应式设计？

Question

我正在尝试使用CSS进行这种响应式设计.

当有足够的空间来显示整个长度时,它基本上应该是600px宽度.
如果没有,它会折叠,然后右侧部​​分出现在左侧部分的底部.
我正在努力如何归档这个.

这是DEMO,我可以走这么远
http://jsfiddle.net/a7Fkj/5/

HTML

<div class="table_row">
    <div class="left_partial">
        <div class="StoreName">Walmart Store</div>
        <div class="Location">Located in California</div>
    </div>

    <div class="right_partial">
        <div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg"><div>
        <div class="person1">John Smith<div>
        <div class="person2">Mike Tailor<div>
        <div class="person3">Jessica Swan<div>
    </div>

</div>

CSS

div.table_row{
    min-width: 300px;
    margin-bottom: 30px;

}

div.left_partial{
    width: 300px;

}

div.right_partial{
    width: 300px;   
}

div.StoreName{
    background-color: #000000;
    color: #FFFFFF;
}

div.Location{

}

div.store_icon{
    width: 60px;
    height: 60px;
}

div.person1{

}

div.person2{

}

div.person3{

}

Answer 1

您不需要对此设计进行媒体查询 - 您可以在调整浏览器大小时使用内联块来折叠布局.

HTML:

<div class="table_row">
    <div class="left_partial">
        <div class="StoreName">Walmart Store</div>
        <div class="Location">Located in California</div>
    </div>

    <div class="right_partial">
        <div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg" /></div>
        <div class="people">
            <div class="person">John Smith</div>
            <div class="person">Mike Tailor</div>
            <div class="person">Jessica Swan</div>
        </div>
    </div>

</div>

CSS:

div.table_row {min-width:300px; margin-bottom:30px;

}

div.left_partial{
    width: 300px;
    display:inline-block;
    vertical-align:top;

}

div.right_partial{
    width: 300px;   
    display:inline-block;
    vertical-align:top;
    margin-bottom:30px;
}

div.StoreName{
    background-color: #000000;
    color: #FFFFFF;

}

div.Location{

}

div.store_icon{
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:top;
}

div.store_icon img{
    width:100%;
    height:100%;
}
div.people{
    display:inline-block;
    vertical-align:top;
    height:60px;        
    width:234px;
}

jsfiddle:http://jsfiddle.net/kmMEM/

这将在浏览器调整大小时折叠设计 - 我向right_partial添加了30px的底部边距以确保列表堆栈正确.