Есть ли способ установить для свойства display двух разных виджетов, содержащихся в отдельных div, разные значения при использовании адаптивного дизайна?

Question

Итак, я импортировал два виджета Google Translate на свой сайт, и они находятся в разных местах, содержащихся в разных div.

Я хочу, чтобы один из них был виден, когда размер окна равен lg (я использую загрузчик), поэтому я присвоил ему значение класса d-lg-block и d-none, чтобы оно исчезло и не исчезло. не занимать место, когда окно сжимается.

В другом div у меня просто есть элемент google translate с другим идентификатором, на который по какой-то причине влияют значения классов первого виджета (он также появляется, когда размер окна большой, и исчезает, когдаокно сжимается). Я попытался установить класс второго элемента widget / google translate равным d-block и d-lg-none, но он не работает.

    <div class="col-2 d-none d-lg-block" style="position: relative; 
        top: 21px; right: 20px;" id="google_translate_element">
    </div>
    <div class="col-2 d-block d-lg-none" id="google_translate_element2">
    </div>

Любой способ получить класс отображения равным одномуне влияет на других?

Answer 1

Это будет работать для вас.

    <div class="col-2 hidden-md-down" style="position: relative; 
        top: 21px; right: 20px;" id="google_translate_element">
  testetete
    </div>
    <div class="col-2 hidden-lg-up" id="google_translate_element2">
      tetsetetetetetet
    </div>