在金字塔形状的敏感css瓦片堆

Question

我有一行3个内联块，横跨页面的宽度：

当页面达到1000px宽时，我希望瓷砖自己堆叠为金字塔：

然后在460px他们需要垂直堆叠：

我目前的html / css结构是：

<div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
</div>

.tile-row{
    margin: 0 auto;
    max-width:1485px;
}

.tile{
    width:32%;
    display: inline-block;
    height: 200px;
}

如何设置媒体查询以完成上述方案？如果不使用媒体查询，有没有更简单的方法呢？

Answer 1

Fiddle: http://jsfiddle.net/C2pjx/


 .tile-row{
      margin: 0 auto;
 }

.tile{
    width:32%;
    float: left;
    height: 100px;
    background: red;
    margin-left:10px;
    margin-bottom: 10px;
 }

 @media only screen and (max-width: 1000px) {
   .tile-row > div:nth-of-type(1)
    {
        float: none;
        margin: 10px 100px;

    }
 }
 @media only screen and (max-width: 460px) {
    .tile-row > div:nth-of-type(1){
        margin: 10px 0;
    }
    .tile{
        float:none;
        background: blue;
        margin: 10px 0;
    }

 }