How to display a different number of blocks at different widths in js?

• 0
  Now I have 6 blocks shown at a width of 768px, the rest are hidden, there is a button that shows all blocks. It needs to show 8 blocks at 1120px width. How to do it in js?
  
  

  function openbox(logo) {
     display = document.getElementById(logo).style.display;
    if(display=='none'){
        document.getElementById("button").innerText = "Скрыть";  
        document.getElementById(logo).style.display='flex';
     }else{
        document.getElementById("button").innerText = "Показать все";
        document.getElementById(logo).style.display='none';
       }  
   };

  
  
  

  <section></section>
          <section></section>
          <section></section>
          <section></section>
          <section></section>
          <section></section>
  
          <div id="logo">
  
          <section></section>
          <section></section>
          <section></section>
          <section></section>
          <section></section>
          <section></section>
  
          </div>
      
      
      <button class="slider-main__button-read-more" id="button" onclick="openbox('logo');  return false">Показать все</button>

  
  
  

  #logo {
  display: none
  }

  JavaScript Anonymous, Feb 22, 2020

---

1 Answers
• 0
  Make them a common parent and calculate the width of the window when loading DOM elements.
  
  And then go through the children of that parent and with the desired index === 6 or 8 start adding hidden.
  
  https://developer.mozilla.org/en/docs/Web/API / Pare ...
  
  
  
  If you want to subscribe when changing the screen size:
  
  https://developer.mozilla.org/en/docs/Web/API / Wind ...
  
  then the same function can be called here

  Anonymous

---