Как мне оформить div из сетки, чтобы заблокировать отображение?

Question

У меня есть несколько div в моем html, которые я хочу отображать рядом на рабочем столе и отображать на мобильном устройстве.Я использовал сетку, чтобы отобразить их на рабочем столе.В моем файле CSS я добавил медиа-запрос

@media(max-width:768px){
divselector {
display: block
}
}

Но элементы div все еще отображаются рядом.Что я могу делать не так?

Answer 1

Вы можете расположить их с помощью absolute в мобильном режиме, так что все элементы будут сложены друг на друга

.ex {
  width: 200px;
  height: 50px;
  padding: 15px;
  border: 2px solid #bada55;
  display: inline-block;
  background-color: #e5e5e5;
}

@media screen and (max-width: 800px) {
  .ex {
    position:absolute;
  }
}

<div class="ex">1111</div>
<div class="ex">2222</div>

Answer 2

К сожалению, ни одно из этих предложений не сработало для меня.

Я продолжал экспериментировать, пока не получил именно то, что хотел.Он по-прежнему основан на сетке.

@media (max-width: 768px) {
    div#dashboard_container,
    {
        display: grid;
        grid-template-columns: auto;
    }
}

Дело в том, что если я укажу только #dashboard_container в медиа-запросе, код не будет работать.Я не до конца понимаю, почему это так.

Скрипка здесь , демонстрирующая полное решение.

Answer 3

Проверьте здесь jsfiddle

<div class="container">
   <div class="a"></div>
   <div class="b"></div>
</div>

            .container {
          font-size: 0;
        }

        .container div {
          display: inline-block;
          width: 100px;
          height: 30px;
          background: #000000;
          font-size: 12px;
        }

        .container div.a {
          width: 100px;
          background: #555555;
        }

        .container div.b {
          width: 100px;
          background: #333333;
        }

        @media screen and (max-width: 992px) {
          .container {
            display: block;
          }
        }

        /* On screens that are 600px or less */
        @media screen and (max-width: 600px) {
          .container {
            display: block;
          }
        }