Скрытие элементов при изменении размера экрана

1. В CSS мы можем использовать медиа-запросы.

   @media (max-width: 768px) {
    .box:first-of-type,
    .box:last-of-type {
     display: none;
    }
   }
   
   @media (max-width: 992px) {
     .box:first-of-type {
      display: none;
     }
   }
   

2. Bootstrap поставляется с служебными классами. Мы используем их непосредственно в HTML. Чтобы добиться того же результата, используя служебные классы, мы можем сделать.

   <div class = "box d-none d-md-block">Hello World!</div>
   <div class = "box d-none d-lg-block">Hello World!</div>
   <div class = "box">Hello World!</div>
   

Для этого вы можете использовать медиа-запрос CSS. А с помощью CSS вы можете выбрать элемент по его положению. Так что в основном ответ @imran подойдет вам.

Media Query Определение размера вашего окна и запуск части CSS, когда дело доходит до этого размера экрана. Затем селекторы .box:last-child , .box:first-child выберут ваш n-й элемент в html. Для получения более подробной информации перейдите по следующим ссылкам.

• Медиа-запрос: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

• Селектор nTh: https://www.w3schools.com/cssref/sel_nth-last-child.asp

Я могу показать вам простой способ:

В файле HTML вы меняете на:

<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "style.css">

<div class = "box desktop tablet mobile">Hello World!</div>
<div class = "box desktop tablet">Hello World!</div>
<div class = "box desktop">Hello World!</div>

В вашем CSS вы просто делаете это:

.box {
    display: none;
}    

@media only screen and (min-width: 1150px) {    
    .box.tablet {
        display: none;
    }    
    .box.desktop {
        display: block;
    }    
}

@media only screen and (min-width: 768px) and (max-width: 1149px) {    
    .box.desktop {
        display: none;
    }    
    .box.tablet {
        display: block;
    }        
}
    
@media only screen and (max-width: 767px) {    
    .box.desktop {
        display: none;
    }    
    .box.tablet {
        display: none;
    }    
    .box.mobile {
        display: block;
    }        
}

Вы можете использовать медиа-запрос в css, чтобы определить тип устройства устройства и использовать nth-of-child, чтобы скрыть элементы с помощью display:none. Фрагмент кода, приведенный ниже, объяснил это лучше.

@media (min-width: 576px) {
    .box:first-child, .box:last-child{
        display:none
        }

@media (min-width: 768px) {
    .box:first-child{
        display:none
        }

576 пикселей используется для мобильных устройств и 768 пикселей для планшетов, и все три элемента div будут видны по умолчанию на настольных устройствах.