отзывчивый дизайн дисплей нет и видимость видимая не переключается

Question

Привет всем Я делаю свой первый отзывчивый сайт.

Я делаю это мобильным первым.

В моем HTML я дал некоторые элементы, которые я не хочу, чтобы показать на мобильном классе мобильных и те, которые я не хочу, чтобы показать класс настольных

Это работает блестяще.

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

.desktop {visibility:visible;} .mobile {display:none;} 



<div id="topbar"> 
     <!--Mobile Nav--> 
      <section> 

       <div class="mobile container"> 
        <div class="col12"> 

        <div class="click">Menu</div> 

         <nav id="menu"> 

          <li><a href="">home</a></li> 
          <li><a href="">club information</a></li> 
          <li><a href="">club kit</a></li> 
          <li><a href="">membership</a></li> 
          <li><a href="">event news</a></li> 
          <li><a href="">calendar</a></li> 
          <li><a href="">advice</a></li> 
          <li><a href="">gallery</a></li> 

         </nav> 
        </div> 


       </div> 


      </section> 
      <!--Desktop Nav--> 
      <section> 

       <div class="desktop container"> 
        <div class="col12"> 



         <nav id="menu"> 

          <li><a href="">home</a></li> 
          <li><a href="">club information</a></li> 
          <li><a href="">club kit</a></li> 
          <li><a href="">membership</a></li> 
          <li><a href="">event news</a></li> 
          <li><a href="">calendar</a></li> 
          <li><a href="">advice</a></li> 
          <li><a href="">gallery</a></li> 

         </nav> 
        </div> 


       </div> 


      </section> 
     </div> 

Answer 1

Все, что вам нужно сделать, это чередовать .mobile и .desktop классов быть display: block или display: none, как и когда вам нужны вещи, чтобы показать/спрятать через ваши изломы.

Вы путаете использование display и visability в текущем примере