Media query issue: resizing/moving blocks - html

Question

I am trying to have three different layouts
Desktop- image + text block on top of a page
Medium devices- image on top of a page and text on the bottom of the page
Mobile- text on the bottom of the page
I have figured out how I want to do the desktop and the mobile, and I thought I had the medium devices figured out, but it isn't working correctly.
HTML
<div class="some-container--top">
<div class="row">
<div class="column image">
<img src="{image url}" alt="alt" />
</div>
<div class=" column container">
<img src="{image url}" alt="color" />
<div class="text-block">
<h3>title</h3>
<p>text</p>
</div>
</div>
</div>
</div>
<div class="some-container--bottom">
<p>text</p>
</div>
CSS:
#media only screen and (min-width: 1000px){
.some-container--bottom{
display:none;
}
}
#media only screen and(max-width:999px) and (min-width:601px){
.container{
display:none;
}
.some-container--bottom{
display:none;
}
}
#media only screen and (max-width: 600px){
.some-container--top{
display:none;
}
}
So, desktop works (i.e, I have the picture and the text showing up correctly) and mobile works ( I have the text showing up where I want). However, for my medium devices it shows everything( text and image on both bottom and top of page). What is wrong with my code?

Answer 1

There is an error in your css-rule:
#media only screen and(max-width:999px) and (min-width:601px){
^ There must be a space between 'and' and the opening parenthesis
Demo