nth-child selector doesn't work in media query - css

Question

I have a project built with react and reactstrap (bootstrap 4 components). When I add the code
.col:nth-child(3) {
order: -1 !important;
}
it work great, but when I try to add in a media query it doesn't work.
#media only screen and (max-width: 700) {
.col:nth-child(3) {
order: -1 !important;
max-width: 700px
}}
what is going on here??
it is part of a nav built with reactStrap.
<Nav className='nav'>
<Col>
<Link to='/product'>
<NavItem className='nav-item'>Product</NavItem>
</Link>
</Col>
<Col>
<Link to='/brand'>
<NavItem className='nav-item'>Brands</NavItem>
</Link>
</Col>
<Col className='nav-column'>
<Link to='/'>
<NavItem className='nav-item nav-title'>
<h1 className='title'>
Makeup <span className='bomb'>Bomb</span>
</h1>
</NavItem>
</Link>
</Col>
<Col>
<Link to='/update'>
<NavItem className='nav-item'>Update</NavItem>
</Link>
</Col>
<Col>
<Link to='/about'>
<NavItem className='nav-item'>About</NavItem>
</Link>
</Col>
</Nav>

Answer 1

#media (max-width: 700px) {
.col:nth-child(3) {
order: -1 !important;
}
}
Try this instead, you haven't used PX and did not close the bracket

Answer 2

Here you go - Move screen resolution over 700px to see the color change.
Fiddle for screen visualization.
Nav :nth-child(1) {
order: -1 !important;
color: red;
}
#media only screen and (max-width: 700px) {
Nav :nth-child(1) {
order: -1 !important;
color: blue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<Nav className='nav'>
<Col class="col">
<Link to='/product'>
<NavItem className='nav-item'>Product</NavItem>
</Link>
</Col>
<Col class="col">
<Link to='/brand'>
<NavItem className='nav-item'>Brands</NavItem>
</Link>
</Col>
<Col className='nav-column'>
<Link to='/'>
<NavItem className='nav-item nav-title'>
<h1 className='title'>
Makeup <span className='bomb'>Bomb</span>
</h1>
</NavItem>
</Link>
</Col>
<Col class="col">
<Link to='/update'>
<NavItem className='nav-item'>Update</NavItem>
</Link>
</Col>
<Col class="col">
<Link to='/about'>
<NavItem className='nav-item'>About</NavItem>
</Link>
</Col>
</Nav>

Answer 3

EDIT:
I decided to change the class .col to an id. This works.
#media only screen and (max-width: 700px) {
#col:nth-child(3) {
order: -1 !important;
}
}