Responsive css tiles stack in pyramid shape

Question

I have a row of 3 inline-blocks the span the width of the page horizontally:

When the page reaches 1000px wide I want the tiles to stack themselves as a pyramid:

And then at 460px they need to stack vertically:

My current html/css structure is:

<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;
}

How would I set up media queries to accomplish the above scenarios? Is there an easier way to do this without using media queries?

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;
    }

 }