Ответные CSS плиток укладывают в форме пирамиды

Question

У меня есть ряд 3 инлайн-блоков пролетных ширина страницы по горизонтали:

Когда страница достигает 1000 пикселей в ширину Я хочу плитку укладывать себя в виде пирамиды:

, а затем в 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; 
    } 

}