{"id":3811,"date":"2025-02-27T07:18:36","date_gmt":"2025-02-27T07:18:36","guid":{"rendered":"https:\/\/thoth.dk\/?p=3811"},"modified":"2026-02-19T20:52:26","modified_gmt":"2026-02-19T20:52:26","slug":"hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme","status":"publish","type":"post","link":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/","title":{"rendered":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Kolonner er responsive i WordPress. P\u00e5 mindre enheder stables de typisk s\u00e5dan, at kolonnen til venstre ligger \u00f8verst. Som regel er det ok. Men ikke altid. Hvordan f\u00e5r man en af de andre kolonner \u00f8verst? Denne tutorial viser, hvordan du kan l\u00e6gge den midterste kolonne \u00f8verst. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hvis du har brug for at stable p\u00e5 en anden m\u00e5de, s\u00e5 er det let at modificere denne CSS, s\u00e5 det passer med dine behov.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Herunder ser du tre kolonner. P\u00e5 mindre sk\u00e6rme vil kolonnerne stakke indholdes s\u00e5dan, at den venstre kolonne l\u00e6gger sig \u00f8verst. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kolonnerne fungerer ved hj\u00e6lp at <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">flexbox<\/a>. Det kan du udnytte. Kolonnerne herunder demonstrerer princippet.<\/p>\n\n\n\n<style>\n\/** Flexbox \u00e6ndrer r\u00e6kkef\u00f8lgen p\u00e5 stakken. Du kan alts\u00e5 den kolonne som skal vises \u00f8verst *\/\n\n@media only screen and (max-width: 780px) {\n\n.box {\n  display: flex;\n  flex-direction: row;\n}\n.box :nth-child(1) {\n  order: 2;\n}\n.box :nth-child(2) {\n  order: 1;\n}\n.box :nth-child(3) {\n  order: 3;\n}\n\t\n}\n\n<\/style>\n\n\n\n<div class=\"wp-block-columns alignfull box has-background is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\" style=\"border-width:1px;background:linear-gradient(135deg,rgb(59,0,49) 57%,rgba(82,0,150,0.62) 76%)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<h5 class=\"wp-block-heading\">Kolonne 1<\/h5>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4dc2ed4cdcd&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4dc2ed4cdcd\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg\" alt=\"Heks med kat (Co-Pilot feb. 2025)\" class=\"wp-image-3538\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04-300x300.jpg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04-150x150.jpg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Heks med kat (Co-Pilot feb. 2025)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00f8v at g\u00f8re browseren mindre. Den midterste heks l\u00e6gger sig \u00f8verst.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<h5 class=\"wp-block-heading\">Kolonne 2 (stables \u00f8verst)<\/h5>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4dc2ed4e85a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4dc2ed4e85a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-0.jpg\" alt=\"Heks (Co-Pilot, 2025)\" class=\"wp-image-3536\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-0.jpg 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-0-300x300.jpg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-0-150x150.jpg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-0-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Heks (Co-Pilot, 2025)<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<h5 class=\"wp-block-heading\">Kolonne 3<\/h5>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4dc2ed4f11f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4dc2ed4f11f\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-maane.jpg\" alt=\"Heks (Co-Pilot, 2025)\" class=\"wp-image-3537\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-maane.jpg 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-maane-300x300.jpg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-maane-150x150.jpg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks-maane-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Heks (Co-Pilot, 2025)<\/figcaption><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Keine Hexerei.<br>CSS!<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">A) Giv dine Kolonner en class<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Marker kolonnerne i &#8220;Dokumentpanelet&#8221;. Under fanebladet Blok \/ Avanceret kan du tilf\u00f8je &#8220;Ekstra CSS-klasser. Herunder kan du se, hvordan jeg har tilf\u00f8jet klassen <strong>box<\/strong>:<\/p>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4dc2ed5124c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4dc2ed5124c\" class=\"wp-block-image alignwide size-large has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20-1024x489.png\" alt=\"\" class=\"wp-image-3815\" style=\"border-width:1px\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20-1024x489.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20-300x143.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20-768x367.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20-1536x734.png 1536w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.21.20.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">I venstre side er Dokumentpanelet \u00e5bent. Laget Kolonner er markeret. Til h\u00f8jre er  panelet indstillinger \u00e5bent. Under fanebladet Avanceret er klassen box tilf\u00f8jet til &#8220;Ekstra CSS-klasser&#8221;.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">B) Blok: Tilpasset HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e5r klassen er tilf\u00f8jet kan du begynde trylleriet med CSS.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a4dc2ed516d0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a4dc2ed516d0\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"212\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.35.57.png\" alt=\"\" class=\"wp-image-3825\" style=\"border-width:1px\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.35.57.png 339w, https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/Skaermbillede-2025-02-27-kl.-08.35.57-300x188.png 300w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Blokken &#8220;Tilpasset HTML&#8221; er indsat oven over kolonnerne med klassen box.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tilf\u00f8j blokken Tilpasset HTML oven over kolonnerne. Her kan du s\u00e5 skrive dine styles i en &lt;style&gt; container. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I &lt;style&gt; containeren skrives CSS a la det her:<\/p>\n\n\n\n<pre class=\"wp-block-code alignwide\" style=\"border-width:1px\"><code>&lt;style&gt;\n\/** Flexbox \u00e6ndrer r\u00e6kkef\u00f8lgen p\u00e5 stakken. Du kan alts\u00e5 den kolonne som skal vises \u00f8verst *\/\n\n@media only screen and (max-width: 800px) {\n\n.box {\n  display: flex;\n  flex-direction: row;\n}\n.box :nth-child(1) {\n  order: 2;\n}\n.box :nth-child(2) {\n  order: 1;\n}\n.box :nth-child(3) {\n  order: 3;\n}\n\t\n}\n\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">C) Test<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sandhedens time er inde. Virker vores CSS-hekseri? Pr\u00f8v at \u00e6ndre st\u00f8rrelsen p\u00e5 browservinduet &#8211; eller brug <em>Inspect Tool<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flere muligheder<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Den viste kode vil kun p\u00e5virke en enkelt webside. Hvis du \u00f8nsker at bruge effekten andre steder, s\u00e5 kan CSS&#8217;en tilf\u00f8jes ved hj\u00e6lp af fx <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS and JS<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">G\u00f8r s\u00e5dan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Opret et CSS med koden ovenover.<\/li>\n\n\n\n<li>Gem det.<\/li>\n\n\n\n<li>Opret Kolonner med tre kolonner &#8211; og giv blokken classen box.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Nu kan du bruge effekten overalt p\u00e5 sitet. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kolonner er responsive i WordPress. P\u00e5 mindre enheder stables de typisk s\u00e5dan, at kolonnen til venstre ligger \u00f8verst. Som regel er det ok. Men ikke altid. Hvordan f\u00e5r man en af de andre kolonner \u00f8verst? Denne tutorial viser, hvordan du kan l\u00e6gge den midterste kolonne \u00f8verst. <\/p>\n","protected":false},"author":1,"featured_media":3538,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[31,24,23,21],"tags":[142,141,52,140,143,49],"class_list":["post-3811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimediedesign","category-programming","category-tutorials","category-dk","tag-advanced","tag-class","tag-css","tag-flexbox","tag-simple-custom-css-and-javascript","tag-tilpasset-kode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Kolonner er responsive i WordPress. P\u00e5 mindre enheder stables de typisk s\u00e5dan, at kolonnen til venstre ligger \u00f8verst. Som regel er det ok. Men ikke altid. Hvordan f\u00e5r man en af de andre kolonner \u00f8verst? Denne tutorial viser, hvordan du kan l\u00e6gge den midterste kolonne \u00f8verst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-27T07:18:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-19T20:52:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Per Thykj\u00e6r Jensen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skrevet af\" \/>\n\t<meta name=\"twitter:data1\" content=\"Per Thykj\u00e6r Jensen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/\"},\"author\":{\"name\":\"Per Thykj\u00e6r Jensen\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"headline\":\"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme?\",\"datePublished\":\"2025-02-27T07:18:36+00:00\",\"dateModified\":\"2026-02-19T20:52:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/\"},\"wordCount\":363,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/heks04.jpg\",\"keywords\":[\"Advanced\",\"Class\",\"CSS\",\"Flexbox\",\"Simple Custom CSS and JavaScript\",\"Tilpasset kode\"],\"articleSection\":[\"Multimediedesign\",\"Programming\",\"Tutorials\",\"\ud83c\udde9\ud83c\uddf0 Danske Tutorials\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/\",\"name\":\"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/heks04.jpg\",\"datePublished\":\"2025-02-27T07:18:36+00:00\",\"dateModified\":\"2026-02-19T20:52:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/heks04.jpg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/heks04.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"Heks med kat (Co-Pilot feb. 2025)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/2025\\\/02\\\/27\\\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\",\"url\":\"https:\\\/\\\/thoth.dk\\\/\",\"name\":\"Wordpress og WooCommerce\",\"description\":\"Syv kreative dage med WordPress og WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thoth.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#\\\/schema\\\/person\\\/d94ae14e2a45089632b96d9f633fac06\",\"name\":\"Per Thykj\u00e6r Jensen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g\",\"caption\":\"Per Thykj\u00e6r Jensen\"},\"description\":\"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.\",\"sameAs\":[\"https:\\\/\\\/thoth.dk\"],\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/author\\\/per\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce","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:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/","og_locale":"da_DK","og_type":"article","og_title":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce","og_description":"Kolonner er responsive i WordPress. P\u00e5 mindre enheder stables de typisk s\u00e5dan, at kolonnen til venstre ligger \u00f8verst. Som regel er det ok. Men ikke altid. Hvordan f\u00e5r man en af de andre kolonner \u00f8verst? Denne tutorial viser, hvordan du kan l\u00e6gge den midterste kolonne \u00f8verst.","og_url":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/","og_site_name":"Wordpress og WooCommerce","article_published_time":"2025-02-27T07:18:36+00:00","article_modified_time":"2026-02-19T20:52:26+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg","type":"image\/jpeg"}],"author":"Per Thykj\u00e6r Jensen","twitter_card":"summary_large_image","twitter_misc":{"Skrevet af":"Per Thykj\u00e6r Jensen","Estimeret l\u00e6setid":"3 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#article","isPartOf":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/"},"author":{"name":"Per Thykj\u00e6r Jensen","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"headline":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme?","datePublished":"2025-02-27T07:18:36+00:00","dateModified":"2026-02-19T20:52:26+00:00","mainEntityOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/"},"wordCount":363,"commentCount":0,"image":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg","keywords":["Advanced","Class","CSS","Flexbox","Simple Custom CSS and JavaScript","Tilpasset kode"],"articleSection":["Multimediedesign","Programming","Tutorials","\ud83c\udde9\ud83c\uddf0 Danske Tutorials"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/","url":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/","name":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme? - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg","datePublished":"2025-02-27T07:18:36+00:00","dateModified":"2026-02-19T20:52:26+00:00","author":{"@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06"},"breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2025\/02\/heks04.jpg","width":1024,"height":1024,"caption":"Heks med kat (Co-Pilot feb. 2025)"},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/2025\/02\/27\/hvordan-far-jeg-den-midterste-kolonne-overst-pa-mindre-skaerme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"Hvordan f\u00e5r jeg den midterste kolonne \u00f8verst p\u00e5 mindre sk\u00e6rme?"}]},{"@type":"WebSite","@id":"https:\/\/thoth.dk\/#website","url":"https:\/\/thoth.dk\/","name":"Wordpress og WooCommerce","description":"Syv kreative dage med WordPress og WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thoth.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Person","@id":"https:\/\/thoth.dk\/#\/schema\/person\/d94ae14e2a45089632b96d9f633fac06","name":"Per Thykj\u00e6r Jensen","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c742a8215d5628ce5ef34c45460dd1c5211c693c0613635306baeec5c28d7a9?s=96&d=mm&r=g","caption":"Per Thykj\u00e6r Jensen"},"description":"P\u00e5 Thoth.dk kan du finde tutorials og artikler om udvikling af websites med WordPress og online shopping med WooCommerce. Der er fokus p\u00e5 de nyeste blokbaserede temaer og metoder. Materialer og tutorials er udviklet af Per Thykj\u00e6r Jensen, lektor p\u00e5 Multimediedesigneruddannelsen ved Erhvervsakademi Aarhus.","sameAs":["https:\/\/thoth.dk"],"url":"https:\/\/thoth.dk\/index.php\/author\/per\/"}]}},"_links":{"self":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/3811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/comments?post=3811"}],"version-history":[{"count":14,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/3811\/revisions"}],"predecessor-version":[{"id":6580,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/posts\/3811\/revisions\/6580"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/3538"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=3811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/categories?post=3811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/tags?post=3811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}