{"id":1105,"date":"2020-08-20T21:12:57","date_gmt":"2020-08-20T12:12:57","guid":{"rendered":"http:\/\/meeny.com\/?p=1105"},"modified":"2020-08-20T21:13:10","modified_gmt":"2020-08-20T12:13:10","slug":"reordering-grid-items","status":"publish","type":"post","link":"https:\/\/meeny.com\/?p=1105","title":{"rendered":"Reordering grid items"},"content":{"rendered":"\n<p>Reordering grid items &#8211; re-ordering elements with Bootstrap4<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Reordering grid items - re-ordering elements - Bootstrap4\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/YoYdLIqK7Ao?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;hr>\n&lt;div class=\"container\">\n  \n  &lt;ul class=\"list-unstyled\">\n    &lt;li class=\"media\">\n      &lt;div class=\"order-md-2\">\n        &lt;i class=\"fas fa-battery-empty fa-2x bg-primary p-3 mx-3 rounded-lg text-light   \">&lt;\/i>\n      &lt;\/div>\n      &lt;div class=\"media-body text-md-right order-md-1\">\n        &lt;h5 class=\"mt-0 mb-1\">&lt;span class=\"w900\">List-based&lt;\/span>&lt;span class=\"w400\">media object&lt;\/span>&lt;\/h5>\n        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.\n      &lt;\/div>\n    &lt;\/li>\n    &lt;li class=\"media my-4\">\n      &lt;div class=\"order-2 order-md-1\">\n        &lt;i class=\"fas fa-battery-quarter fa-2x bg-secondary p-3 mx-3 rounded-lg text-light\">&lt;\/i>\n      &lt;\/div>\n      &lt;div class=\"media-body order-1 order-md-2\">\n        &lt;h5 class=\"mt-0 mb-1\">&lt;span class=\"w900\">List-based&lt;\/span>&lt;span class=\"w400\">media object&lt;\/span>&lt;\/h5>\n        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.\n      &lt;\/div>\n    &lt;\/li>\n    &lt;li class=\"media\">\n      &lt;div class=\"order-md-2\">\n        &lt;i class=\"fas fa-battery-half fa-2x bg-secondary p-3 mx-3 rounded-lg text-light\">&lt;\/i>\n      &lt;\/div>\n      &lt;div class=\"media-body text-md-right order-md-1\">\n        &lt;h5 class=\"mt-0 mb-1\">&lt;span class=\"w900\">List-based&lt;\/span>&lt;span class=\"w400\">media object&lt;\/span>&lt;\/h5>\n        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.\n      &lt;\/div>\n    &lt;\/li>\n  &lt;\/ul>\n  \n&lt;\/div>\n&lt;hr>\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"KFmMVNun5T\"><a href=\"https:\/\/meeny.com\/2020\/06\/20\/bootstrap4-theming-ep01\/\">Bootstrap4 theming ep01<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap4 theming ep01&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2020\/06\/20\/bootstrap4-theming-ep01\/embed\/#?secret=KFmMVNun5T\" data-secret=\"KFmMVNun5T\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-meeny\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"hF5BdDarFs\"><a href=\"https:\/\/meeny.com\/2020\/06\/22\/bootstrap4-theming-ep02\/\">Bootstrap4 theming ep02<\/a><\/blockquote><iframe title=\"&#8220;Bootstrap4 theming ep02&#8221; &#8212; Meeny\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"https:\/\/meeny.com\/2020\/06\/22\/bootstrap4-theming-ep02\/embed\/#?secret=hF5BdDarFs\" data-secret=\"hF5BdDarFs\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Reordering grid items &#8211; re-ordering elements with Bootstrap4<\/p>\n","protected":false},"author":1,"featured_media":1107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[62],"tags":[415,410,411,444,443,442,598,396,595,596,397,395,394,398,613,422,438,439],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Reordering grid items - Meeny<\/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:\/\/meeny.com\/?p=1105\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reordering grid items - Meeny\" \/>\n<meta property=\"og:description\" content=\"Reordering grid items - re-ordering elements with Bootstrap4\" \/>\n<meta property=\"og:url\" content=\"https:\/\/meeny.com\/?p=1105\" \/>\n<meta property=\"og:site_name\" content=\"Meeny\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-20T12:12:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-20T12:13:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Meeny\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Meeny\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/meeny.com\/?p=1105#article\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?p=1105\"},\"author\":{\"name\":\"Meeny\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\"},\"headline\":\"Reordering grid items\",\"datePublished\":\"2020-08-20T12:12:57+00:00\",\"dateModified\":\"2020-08-20T12:13:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1105\"},\"wordCount\":27,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1105#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png\",\"keywords\":[\"bootstrap\",\"bootstrap css\",\"bootstrap html\",\"bootstrap theme fonts\",\"Bootstrap4 primary color change\",\"Bootstrap4 theming\",\"card hover animation css\",\"css\",\"hover\",\"hover effect\",\"html\",\"html code\",\"html css\",\"javascript\",\"reorder elements\",\"responsive design\",\"sticky-top\",\"template\"],\"articleSection\":[\"HTML &amp; CSS\"],\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/meeny.com\/?p=1105#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/meeny.com\/?p=1105\",\"url\":\"https:\/\/meeny.com\/?p=1105\",\"name\":\"Reordering grid items - Meeny\",\"isPartOf\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/meeny.com\/?p=1105#primaryimage\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?p=1105#primaryimage\"},\"thumbnailUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png\",\"datePublished\":\"2020-08-20T12:12:57+00:00\",\"dateModified\":\"2020-08-20T12:13:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/meeny.com\/?p=1105#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/meeny.com\/?p=1105\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?p=1105#primaryimage\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png\",\"width\":1920,\"height\":1080,\"caption\":\"Reordering grid items\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/meeny.com\/?p=1105#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/meeny.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reordering grid items\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"name\":\"Meeny\",\"description\":\"Issues &amp; News\",\"publisher\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization\",\"name\":\"Meeny\",\"url\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"contentUrl\":\"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png\",\"width\":180,\"height\":41,\"caption\":\"Meeny\"},\"image\":{\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9\",\"name\":\"Meeny\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g\",\"caption\":\"Meeny\"},\"sameAs\":[\"http:\/\/blog.epart.kr\"],\"url\":\"https:\/\/meeny.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reordering grid items - Meeny","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:\/\/meeny.com\/?p=1105","og_locale":"ko_KR","og_type":"article","og_title":"Reordering grid items - Meeny","og_description":"Reordering grid items - re-ordering elements with Bootstrap4","og_url":"https:\/\/meeny.com\/?p=1105","og_site_name":"Meeny","article_published_time":"2020-08-20T12:12:57+00:00","article_modified_time":"2020-08-20T12:13:10+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png","type":"image\/png"}],"author":"Meeny","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Meeny","Est. reading time":"2\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/meeny.com\/?p=1105#article","isPartOf":{"@id":"https:\/\/meeny.com\/?p=1105"},"author":{"name":"Meeny","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9"},"headline":"Reordering grid items","datePublished":"2020-08-20T12:12:57+00:00","dateModified":"2020-08-20T12:13:10+00:00","mainEntityOfPage":{"@id":"https:\/\/meeny.com\/?p=1105"},"wordCount":27,"commentCount":0,"publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"image":{"@id":"https:\/\/meeny.com\/?p=1105#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png","keywords":["bootstrap","bootstrap css","bootstrap html","bootstrap theme fonts","Bootstrap4 primary color change","Bootstrap4 theming","card hover animation css","css","hover","hover effect","html","html code","html css","javascript","reorder elements","responsive design","sticky-top","template"],"articleSection":["HTML &amp; CSS"],"inLanguage":"ko-KR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/meeny.com\/?p=1105#respond"]}]},{"@type":"WebPage","@id":"https:\/\/meeny.com\/?p=1105","url":"https:\/\/meeny.com\/?p=1105","name":"Reordering grid items - Meeny","isPartOf":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website"},"primaryImageOfPage":{"@id":"https:\/\/meeny.com\/?p=1105#primaryimage"},"image":{"@id":"https:\/\/meeny.com\/?p=1105#primaryimage"},"thumbnailUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png","datePublished":"2020-08-20T12:12:57+00:00","dateModified":"2020-08-20T12:13:10+00:00","breadcrumb":{"@id":"https:\/\/meeny.com\/?p=1105#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/meeny.com\/?p=1105"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?p=1105#primaryimage","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/08\/reorder.png","width":1920,"height":1080,"caption":"Reordering grid items"},{"@type":"BreadcrumbList","@id":"https:\/\/meeny.com\/?p=1105#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/meeny.com\/"},{"@type":"ListItem","position":2,"name":"Reordering grid items"}]},{"@type":"WebSite","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#website","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","name":"Meeny","description":"Issues &amp; News","publisher":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/meeny.com\/?tag=ios-13-4-5\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#organization","name":"Meeny","url":"https:\/\/meeny.com\/?tag=ios-13-4-5\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/","url":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","contentUrl":"https:\/\/meeny.com\/wp-content\/uploads\/2020\/05\/LOGO_meeny_180.png","width":180,"height":41,"caption":"Meeny"},"image":{"@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/4b6b745d39f90b39161c79fe08a6feb9","name":"Meeny","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/meeny.com\/?tag=ios-13-4-5\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c64cfa5c72bf22b037e8dce05c95e373?s=96&d=mm&r=g","caption":"Meeny"},"sameAs":["http:\/\/blog.epart.kr"],"url":"https:\/\/meeny.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1105"}],"collection":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1105"}],"version-history":[{"count":1,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1105\/revisions"}],"predecessor-version":[{"id":1108,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/posts\/1105\/revisions\/1108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=\/wp\/v2\/media\/1107"}],"wp:attachment":[{"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meeny.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}