隐藏/显示Div取决于屏幕宽度

Question

I'm currently using CSS to hide a div section when the screen goes under a certain width. That bit works fine, but I'm struggling to get my head round, how to show a replacement div when I hide the div.

I might be going about it the wrong way, but here's my code:

@media all and (max-width: 955px) { 
    div.grid12-11 {
        display: none;
    }
}

@media all and (max-width: 954px) {
    div.grid12-12 {
        display: block;
    }
}

What I'm trying to achieve is when the screen width goes below 955px grid12-11 is hidden and replaced with grid12-12.

Currently both the div's are being shown > 955px rather than replacing the block.

Is there a better/correct way to doing this?

Answer 1

There is no need to change the media query

   div.grid12-12 {
       display: none; // make it hidden on default view
   }

   @media all and (max-width: 955px) { 
        div.grid12-11 {
            display: none;
        }
         div.grid12-12 {
            display: block;
        }
    }

Answer 2

Check this: http://jsfiddle.net/Mohamed_nabil/cHQcD/

@media (max-width: 955px) { 
    div.gridFirst {
        display: none;
    }
}

@media (min-width: 955px) {
    div.gridSecond {
        display: none;
    }
}

Answer 3

How are your initial rules set up? I think you're running into a problem of specificity. If your 'standard' rules are the same or more specific than your rules in your media query, the media query will not override them.

This seems to do what you expect:

@media all and (max-width: 955px) { 
    div.grid12-11 {
        display: none;
    }
    div.grid12-12 {
        display: block;
    }
}

.grid12-11 { display:block; }
.grid12-12 { display:none; }

Note that if your standard rules (non-media) are prefixed with "div", it will NOT function (depending on what order the rules are processed in, and which browser you are using).