nth-child селектор не работает в медиа-запросе

Question

У меня есть проект, построенный с реагированием и реактивным ремнем (bootstrap 4 компонента). Когда я добавляю код

    .col:nth-child(3) {
    order: -1 !important;
}

, он отлично работает, но когда я пытаюсь добавить медиа-запрос, он не работает.

@media only screen and (max-width: 700) {
.col:nth-child(3) {
    order: -1 !important;
    max-width: 700px
}}

что здесь происходит ??

это часть навигационной системы, созданной с реагирующей системой.

<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

Здесь вы go - Переместите разрешение экрана выше 700px, чтобы увидеть изменение цвета.

Fiddle для визуализации экрана.

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 2

РЕДАКТИРОВАТЬ: Я решил изменить класс .col на id. Это работает.

@media only screen and (max-width: 700px) {
    #col:nth-child(3) {
        order: -1 !important;

    }
}

Answer 3

@media (max-width: 700px) {
   .col:nth-child(3) {
     order: -1 !important;
   }
}

Попробуйте вместо этого, вы не использовали PX и не закрыли скобку