I am using WordPress to load content conditionally depending on the viewport size, but I need to replace the load() method with a more appropriate method. You can see how this works in the link above by resizing your browser and watching it load a custom value depending on the browser size.

Example CSS:

      body:after { 
          display: none; 

          /* Default */
          content: "Mobile";
      }

      @media (min-width: 35em) {
          body:after {
              content: "Desktop";
          }
      }

To be very specific, if the JS can detect that content: "Mobile" is active, it will load mobile content. If it detects content: "Desktop", it will load desktop content.

Here's the javascript I'm trying to work with:

  $(function() {
      var currentSize = "Mobile";
      $(window).resize(function() {
          var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

          /* Ridiculous thing to deal with inconsistent returning of
          value from query. Some browsers have quotes some don't */
          size = size.replace(/"/g, "");
          size = size.replace(/'/g, "");

          if (size != currentSize) {
              if (size == 'Desktop') {
                 $(".content").load('file.php');
                 currentSize = 'Desktop';
              }
          }

      }).resize();

  }

How do I load a block with custom hooks? I obviously don't need to use the load() function to call a PHP file since the content is in the database somewhere, but I don't know how to solve this problem.

Here is some example code I want to insert into the desktop version to replace the mobile version code:

      <div class="item">
          <h2 class="nav-tab">One</h2>
          <?php the_block('One'); ?>
      </div>
      <div class="item">
          <h2 class="nav-tab">Two</h2>
          <?php the_block('Two'); ?>
      </div>
      <div class="item">
          <h2 class="nav-tab">Three</h2>
          <?php the_block('Three'); ?>
      </div>

As you can see, there are 3 custom hooks that contain more markup and code. I don't know how to properly load this into the javascript so that it will replace the mobile version code.