How can I archive this responsive design? - html

Question

I'm trying to make this kind of responsive design with CSS.
It basically should be 600px width when there's enough space to show whole length.
When not, it folds, then right partial come appears on the bottom of left partial.
I'm struggling how to archive this.
This is DEMO that I could go this far
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

You don't need media queries for this design- you can use inline-block to collapse the layout when the browser is resized.
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/
This will collapse the design when the browser is resized- I added a 30px bottom margin to your right_partial to ensure the list stacks correctly.