Move PHP code chunk in DOM using screen size

How can I move PHP code in the DOM according to the browser size?

I’m confused. PHP code doesn’t get into the DOM.
And you posted in the JavaScript category.

Please give a brief example of what you’re wanting to do.

In the DOM I need to move block2 in front of block1, if the browser size is less than 500px. The reason for the DOM mention is only cause the div blocks, and I posted in javascript because PHP doesn’t have client side capability to determine browser size - as far as I know only javascript/jQuery do. Media query won’t work because I cannot execute the PHP code twice on the same page with a display none. Any ideas?


            <div class="block1">
                <?php echo $this->getPriceHtml($_product); ?>
                <?php echo $this->getChildHtml('bundle_prices') ?>
                <?php echo $this->getTierPriceHtml() ?>

            <div class="block2">
                <?php echo $this->getPriceHtml($_unreal); ?>
                <?php echo $this->getChildHtml('madeup') ?>
                <?php echo $this->getTierPriceHtml() ?>

            <div class="block3">
                <?php echo $this->getPriceHtml($_desc); ?>
                <?php echo $this->getChildHtml('more-desc') ?>
                <?php echo $this->getTierPriceHtml() ?>

Unless you wanted to do some overly complex AJAXy stuff the fact that the divs content is populated via PHP is not a concern.

Though you could use JavaScript to try and determine viewport dimensions and rearrange the divs, AFAIK the current best practice is to use CSS media queries. (move the divs, instead or re-writing their content)

I’m not a CSS guru so I’ll move this topic there for now and if it turns out it needs to be a JavaScript solution move it back here.

yorsite, can you post a working HTML page showing how these blocks appear on the page? By a working page, I mean one that starts width doctype and ends with /html.

At the moment, I’m not clear about how you are sending data to the page. In most cases, the layout of the page is instrumental in the way the content moves in response to media queries.

These days, you can use media queries along with flexbox to reorder the visual display of a series of elements like this. Flexbox is well supported in the newer browsers, but older ones will miss the party, of course, so you’d perhaps need a JS backup for them (or just leave them in the cold, where they deserve to be).

As Ron says, post a proper example and let us know what path you want to take with this.