在移动设备上隐藏元素

I am developing a website and I need few div tags to hide when I'm on the mobile version and certain conditions are met.

I usually hide div tags with jQuery or CSS but I can't do this here. The div tags are created with a PHP foreach printing a query. And some of the results must not show on the mobile version of the website. But I still need those results to show on the desktop version.

if ($article->reference > 0) {
    if ($article->apothema > 1) {
        if ($catalogue->id == 2) {
            $qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Άμεσα Διαθέσιμο') . "</span>";
        } else {
            $qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Available') . "</span>";
        }
        echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
    } elseif ($article->getApothema() == 1) {
        $qty = "<img title='Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/diathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Αμεσα Διαθέσιμο') . "</span>";
        echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
    } elseif ($article->getApothema() < 1) {
        $qty = "<img title='Μη Διαθέσιμο' alt='Διαθέσιμο' src='" . Mage::getBaseUrl('skin') . "frontend/default/b2b/images/midiathesimo.png'><span style='padding-left: 10px;font-size: 15px;font-weight: bold;color: #58595B;'>" . $this->__('Not Available') . "</span>";
        echo "<span style='display:none;'></span>" . $qty . "<span style='font-size:14px;color:#58595B;font-weight:bold;padding-left: 50px;'></span>";
    }
}

This is the condition based upon the div tags are to hide or show on mobile. If the condition ($article->getApothema() < 1) is truthy, the tags must be hidden, otherwise they should be shown. On desktop it should always show.

What this part of the code actually do is checking the availability of some items in a warehouse and displays accordingly green for plenty, orange for few and red when none is available. Any help would be greatly appreciated.

Use media queries. Adn class thatis hidden when screen has mobile width and then in php echo that class into elements you want hide.

@media screen and (max-width: 600px) {
    .mobile{
        display:none;        #2 options how to hide elemet
        visibility:hidden;   
    }

PHP
echo 
    foreach
            <div class="mobile"></div>
```

You can use this library to detect if a user uses a mobile. To use it, you can do it this way.

// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

// Any mobile device (phones or tablets).
if ( ($detect->isMobile()) && ($article->getApothema() < 1) ) {
    //data show specifically for mobile 
}else{
    //show data for Desktop
}