<div class="container">
    <div class="box">1</div>
    <div class="box is-toggle is-hidden">2</div>
    <div class="box">3</div>
</div>

<button class="toggle-display">
    Toggle Display
</button>

body {
    background: #f6f6f6;
    font-family: 'IBM Plex Sans', sans-serif;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.box {
    background: #fff;
    border-radius: 3px;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 16px rgba(0,0,0,0.07);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    margin: 0 1rem;
    
    @media (min-width: 730px) {
        width: 180px;
        height: 180px;
        font-size: 3rem;
    }
    
    &.is-hidden {
        display: none;
    }
}

.toggle-display {
    background: #327def;
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    font-weight: 700;
    position: fixed;
    top: 20px;
    left: 20px;
    cursor: pointer;
    transition: 0.25s ease;
    
    &:hover,
    &:active,
    &:focus {
        background: darken(#327def, 5%);
        transition: 0.25s ease;
    }
}

document.querySelector('.toggle-display').addEventListener('click', function() {
    document.querySelector('.box.is-toggle').classList.toggle('is-hidden');
});