{"id":6438,"date":"2020-10-30T14:13:36","date_gmt":"2020-10-30T14:13:36","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/fr\/?p=6438"},"modified":"2025-07-18T14:57:21","modified_gmt":"2025-07-18T14:57:21","slug":"order-items-with-css-on-specific-devices","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/","title":{"rendered":"Order items with CSS on specific devices"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"3631.2578125\" data-cache-vw-t=\"617\" data-cache-h-t=\"3112.9765625\" data-cache-vw-m=\"462\" data-cache-h-m=\"6314.40625\"><div class=\"col all\"><p>CSS property&nbsp;<strong class=\"code css-code\">order<\/strong> can be used to order elements within a flexbox. You can reverse the order of items inside a flexbox by applying <span class=\"code css-code\">flex-direction: row-reverse;<\/span> to the flexbox.<\/p><p>If you want a flex-item to appear as the first element, you apply&nbsp;<span class=\"code css-code\">order: -1;<\/span> to that item.<\/p><p><b>However..<\/b> If you want to place the 5th item after the 6th item, you'll have to manually set an order for every single flex-item in the flexbox.. Otherwise, other flex-items will appear as the first items inside of the flexbox. You'll have to add an order to new flex-items too.<\/p><p>You might want to order items differently based on what device is being used, but you don't want to repeat writing CSS and new classes\/IDs for future cases where you want to reorder a specific item inside a specific flexbox on a specific device.<\/p><p>Using JavaScript for this, is not the best solution either, because it causes reflows.<\/p><p>If you want a solution for this.. then keep reading, because I have a solution for you.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>Solution for device-specific order<\/h2><p>The solution I have for you uses CSS and PHP, no JavaScript. This is the CSS you need:<\/p><tw-pre><code class=\"css-code\">  @media (max-width: 575.98px) {\r\n    [style*='--om:'] {\r\n      --om:\t0;\t\/* order mobile *\/\r\n      --mm:\t0;\t\/* move mobile *\/\r\n      --mdm:\t0;\t\/* move direction mobile *\/\r\n      \r\n      order:\tcalc(var(--om) + var(--mm) + var(--mdm));\r\n    }\r\n  }\r\n  @media (min-width: 576px) and (max-width: 1199.98px) {\r\n    [style*='--ot:'] {\r\n      --ot:\t0;\t\/* order tablet *\/\r\n      --mt:\t0;\t\/* move tablet *\/\r\n      --mdt:\t0;\t\/* move direction tablet *\/\r\n      \r\n      order:\tcalc(var(--ot) + var(--mt) + var(--mdt));\r\n    }\r\n  }\r\n  @media (min-width: 1200px) {\r\n    [style*='--od:'] {\r\n      --od:\t0;\t\/* order desktop *\/\r\n      --md:\t0;\t\/* move desktop *\/\r\n      --mdd:\t0;\t\/* move direction desktop *\/\r\n      \r\n      order:\tcalc(var(--od) + var(--md) + var(--mdd));\r\n    }\r\n  }\r\n<\/code><\/tw-pre><p>Don't forget to change the media queries to how you target mobile devices, tablet devices and desktop devices. This is the only CSS that you need, nothing else.<\/p><p>Now, the PHP code. The first thing you have to do is get all the HTML by calling <code>ob_start()<\/code> before adding any HTML and getting the HTML by calling <code>ob_get_clean()<\/code> after all HTML is echoed, printed, etc. You are going to use&nbsp;<a href=\"https:\/\/www.php.net\/manual\/en\/class.domdocument.php\" target=\"_blank\" rel=\"noopener noreferrer\">PHP's XML\/HTML parser<\/a>.<\/p><p>Create a <code>DOMDocument<\/code> and load the HTML that you've received from the buffer:<\/p><tw-pre><code class=\"php-code\">$doc = new DOMDocument();\r\n$doc -&gt; loadHTML($html);\r\n$xPath = new DOMXPath($doc);\r\n<\/code><\/tw-pre><p>The <code>DOMXPath<\/code> will be used to perform complex queries to find specific HTML-elements. Now you need a function that gives flex-items a value for  the <span class=\"code css-code\">order<\/span> CSS property:<\/p><tw-pre><code class=\"php-code\">function numberFlexItems($flexbox, $device) {\r\n  $flexItemsToNumber = [];\r\n  $foundMovingItem = false;\r\n  $order = 0;\r\n  \r\n  foreach($flexbox -&gt; childNodes as $flexItem) {\r\n    if($flexItem -&gt; nodeType == XML_ELEMENT_NODE) {\r\n    \r\n      array_push (\r\n        $flexItemsToNumber,\r\n        [\r\n          $flexItem,\r\n          $order\r\n        ]\r\n      );\r\n      \r\n      if($flexItem -&gt; hasAttribute('data-m-' . substr($device, 0, 1))) {\r\n        \r\n        $move = intval($flexItem -&gt; getAttribute('data-m-' . substr($device, 0, 1)));\r\n        if($move != 0) {\r\n          $foundMovingItem = true;\r\n          \r\n          if($move &gt; 0) {\r\n            $moveDirection = 1;\r\n          } else {\r\n            $moveDirection = -1;\r\n          }\r\n          \r\n          $flexItem -&gt; setAttribute (\r\n            'style',\r\n            '--md' .  substr($device, 0, 1) . ':' . $moveDirection . ';'\r\n            . '--m' .  substr($device, 0, 1) . ':' . $move . ';'\r\n            . $flexItem -&gt; getAttribute('style')\r\n          );\r\n        }\r\n        \r\n      }\r\n      \r\n      $order++;\r\n    }\r\n  }\r\n  \r\n  if($foundMovingItem) {\r\n    foreach($flexItemsToNumber as $flexItemAndNumber) {\r\n      \r\n      $flexItemAndNumber[0] -&gt; setAttribute (\r\n        'style',\r\n        '--o' . substr($device, 0, 1) . ':' . $flexItemAndNumber[1] . ';'\r\n        . $flexItemAndNumber[0] -&gt; getAttribute('style')\r\n      );\r\n    }\r\n  }\r\n}<\/code><\/tw-pre><p>After you've copy-pasted this into your PHP-code, you'll need to call this function on your flexboxes. This function will number flex-items for you and set CSS variables for specific items to be moved on specific devices. You need to call this function for the types of devices for which you want to specify a seperate order for flex-items.<\/p><tw-pre><code class=\"php-code\">$flexboxes = $xPath -&gt; query('\/\/*[contains(@class, 'flexbox')]');  <mark>\/\/ replace <i>flexbox<\/i> with the classname that you use for flexboxes<\/mark>\r\nforeach($flexboxes as $flexbox) {\r\n  numberFlexItems($flexbox, 'desktop');\r\n  numberFlexItems($flexbox, 'tablet');\r\n  numberFlexItems($flexbox, 'mobile');\r\n}\r\n$html = '&lt;!DOCTYPE html&gt;' . $doc -&gt; saveHTML($doc -&gt; documentElement);\r\n$html = preg_replace('\/&lt;\/wbr&gt;\/is', '', $html);\r\n$html = preg_replace('\/&lt;\/source&gt;\/is', '', $html);\r\necho $html;\r\n<\/code><\/tw-pre><p>That's it! This is all you need to be able to order elements inside of a flexbox, without lots of manual work, additional CSS, classes, or JavaScript.<\/p><h3>How to use the solution?<\/h3><p>If you want to place the 5th flex-item after the 6th item on a <b>tablet<\/b> device, just add the following HTML-attribute to the 5th item: <code>data-m-<b><i>t<\/i><\/b>=\"1\"<\/code>.<\/p><p>The order is increased by 1 on tablet devices. It is actually increased by 2, because else the order would be the same as the 6th item. If the order of two flex-items are equal, then the actual order inside of the flexbox is taken into account; thus placing item 5 before 6.<\/p><p>Note that character <b><i>t<\/i><\/b>&nbsp;in <code>data-m-t<\/code> means&nbsp;<b>tablet<\/b>. The last character of the attribute's name is the first character of a specific device at which you want to order a flex-item.<\/p><hr><p><b>This solution is simplified. The additional functionality, which I am sure only few need, has been cut out of the PHP code. This simplified solution has been tested on the <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/\">homepage<\/a> of this website.&nbsp;I hope that this solution added more flexibility to your design.<\/b><\/p><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS property&nbsp;order can be used to order elements within a flexbox. You can reverse the order of items inside a flexbox by applying flex-direction: row-reverse; to the flexbox.If you want a flex-item to appear as the first element, you apply&nbsp;order: -1; to that item.However.. If you want to place the 5th item after the 6th <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":6388,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign<\/title>\n<meta name=\"description\" content=\"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign\" \/>\n<meta property=\"og:description\" content=\"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-30T14:13:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:57:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Order items with CSS on specific devices\",\"datePublished\":\"2020-10-30T14:13:36+00:00\",\"dateModified\":\"2025-07-18T14:57:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\",\"name\":\"CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg\",\"datePublished\":\"2020-10-30T14:13:36+00:00\",\"dateModified\":\"2025-07-18T14:57:21+00:00\",\"description\":\"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg\",\"width\":1200,\"height\":676,\"caption\":\"CSS order items\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign","description":"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/","og_locale":"en_US","og_type":"article","og_title":"CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign","og_description":"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2020-10-30T14:13:36+00:00","article_modified_time":"2025-07-18T14:57:21+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg","type":"image\/jpeg"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Order items with CSS on specific devices","datePublished":"2020-10-30T14:13:36+00:00","dateModified":"2025-07-18T14:57:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/"},"wordCount":7,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/","name":"CSS order items on specific devices. No manual CSS \u2013 Terluin Webdesign","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg","datePublished":"2020-10-30T14:13:36+00:00","dateModified":"2025-07-18T14:57:21+00:00","description":"CSS + PHP solution to order items at specific devices. No need to write CSS manually. Customize or extend this solution to your liking.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/order-items-with-css-on-specific-devices\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/order-items-with-css-on-specific-devices.jpg","width":1200,"height":676,"caption":"CSS order items"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6438"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6438\/revisions"}],"predecessor-version":[{"id":9087,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6438\/revisions\/9087"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/6388"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}