Good day!
I have a few blocks. Some of them should be visible only on phones and laptops, some - on tablets and laptops. What is the best way to organize this?
Now I did it like this, but it works every other time:
/* Smartphones (landscape) ----------- */ @media only screen and (min-width:321px) { .ad, .right-sidebars { display: none; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width:320px) { .ad, .right-sidebars { display: none; } } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .ad, .right-sidebars { display: none; } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) { .left-sidebar { display: none; } .ad, .right-sidebars { display: block; } } /* iPads (landscape) ----------- */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { .left-sidebar { display: none; } .ad, .right-sidebars { display: block; } } /* iPads (portrait) ----------- */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { .left-sidebar { display: none; } .ad, .right-sidebars { display: block; } } /* The New iPad (iPad 3) ----------- */ @media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio: 2) { .left-sidebar { display: none; } .ad, .right-sidebars { display: block; } } /* Laptops ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { .left-sidebar, .ad, .right-sidebars, .content { display: block; } } <div class="container"> <!-- Example row of columns --> <table class="row"> <tbody> <tr> <td class="left-sidebar col-md-4 col-sm-16 col-xs-16"> <h2>Left Sidebar:</h2> <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </td> <td class="content col-md-6 col-sm-10 col-xs-16"> <h2>Content:</h2> <p> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.</p> </td> <td class="ad col-md-2 col-sm-2 col-xs-16"> <a href="#" class="thumbnail"> <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш"> </a> <a href="#" class="thumbnail"> <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш"> </a> <a href="#" class="thumbnail"> <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш"> </a> <a href="#" class="thumbnail"> <img style="height:100px; width: auto;" src="http://altaysm.azurewebsites.net/images/asm.png" alt="алтайстроймаш"> </a> </td> <td class="right-sidebars col-md-4 col-sm-4 col-xs-16"> <div class="right-sidebar"> <h2>Right Sidebar:</h2> <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> <div class="right-sidebar"> <h2>Right Sidebar:</h2> <p> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.</p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div> </td> </tr> </tbody> </table> </div> <!-- /container --> On phones should be only the left sidebar and content. On the tablets - everything except the left sidebar. On laptops - everything.
