html - 将两个并排的 div 居中，在缩小窗口屏幕大小时使 div float

Question

我想知道如何将两个内容居中直到某个阈值，当窗口在宽度方向上最小化时，它会将内容放在右下方。

在这个页面中，左边是图片，右边是描述。当页面最小化到一定宽度时，它会将名称和描述放在下面。

http://artloft.co/products/wacho-rice-mill

所以这个问题分为三个部分:
1) 如何动态最小化 div(我在想一些宽度 %)
2) 当宽度被扩展/最大化时，它们如何居中
3) 如何在宽度减小/最小化时将一个 div 放在另一个之上。

我在这里找到了一部分答案，但没有其他两个，我不明白如何将它们合并。 float the div when reducing the windows screen size

非常感谢

Answer 1

调整窗口大小以查看差异或在 firefox 中按 ctrl+shift+m​​

Fiddle Demo

* ,body{
  margin:0;
  padding:0;    
}
img{
    max-width:100%;
}
#container{
padding:10px;
  text-align:left;
}
.content{
    text-align:justify;
}
.left_image{
  float:left;
  margin:0 20px 10px 0;
  }
@media only screen and (max-width:767px){
  #container{
padding:10px;
  text-align:center;
    margin:0 auto;
}
  .left_image{
    float:none;
    margin:10px auto;
  }
  .content{
    text-align:justify;
  }
}