<div class="box">
    <div class="box_1">
            <h2>Leonardo</h2>
            <ol class="list-size">
                <li id="large-screen"> I am a ninja in large screen</li>
                <li id="medium-screen"> I am ninja in medium screen</li>
                <li id="small-screen"> I am ninja in small screen</li>
            </ol>
        </div>
</div>
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
}

.box {
    max-width: 60ch;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 3px 3px 4px #999;
    margin: 1rem auto;
}

.box_1 {
    text-shadow: 1px 1px 2px #999;
    color: gray;
}

.list-size {
    list-style: none;
    margin-left: -75px;
}

img {
    max-width: 100%;
    position: fixed;
    bottom: 0;
    opacity: 0.5;
}

#large-screen {
    display: none;
}

#medium-screen {
    display: none;
 }

#small-screen {
    display: none;
}



    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }
    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
            color: black;
        }
    }
 let smSize =  document.querySelector('#small-screen');
   let mdSize = document.querySelector('#medium-screen');
   let lgSize = document.querySelector('#large-screen');

   window.addEventListener('resize', () => {
       let intViewPortWidth = window.innerWidth;
       if ( intViewPortWidth < 440) {
           smSize.style.setProperty('display', 'block');
           mdSize.style.setProperty('display', 'none');
           lgSize.style.setProperty('display', 'none');
       } else if (intViewPortWidth > 440 && intViewPortWidth < 800) {
           mdSize.style.setProperty('display', 'block');
           smSize.style.setProperty('display', 'none');
           lgSize.style.setProperty('display', 'none');
       } else if (intViewPortWidth > 800) {
           lgSize.style.setProperty('display', 'block');
           mdSize.style.setProperty('display', 'none');
           smSize.style.setProperty('display', 'none');

       }
     
        }, false)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.