Super User

var counter = 10;
document.querySelector('.my-btn').addEventListener('click', function( ev ) {
  ev.preventDefault();
  if(counter > 0) {
   document.querySelector('.my-div').style.transform = 'translateY(10px)';
   counter--;
  }  
}, false);

<div class="container">
    <div class="sidebar">
      <h3>Сайдбар</h3>
    </div>
    <div class="content">
      <h3>Контент</h3>
    </div>
  </div>

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.sidebar {
  width: 20%;
  padding: 10px;
  background-color: skyblue;
}

.content {
  width: 80%;
  padding: 10px;
  background-color: violet;
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .sidebar, .content {
    width: 100%;
  }
}

<input type="number" pattern="[0-9]*" novalidate />