{"id":5004,"date":"2021-04-21T23:51:48","date_gmt":"2021-04-21T23:51:48","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=5004"},"modified":"2023-05-12T22:04:25","modified_gmt":"2023-05-12T22:04:25","slug":"wpbakery-responsive-options-for-columns","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/","title":{"rendered":"WPBakery responsive options for columns"},"content":{"rendered":"\n

In WPBakery, you can control the width\/offset\/visibility<\/strong> of the columns across different screen sizes from the responsive options tab<\/strong>, for more information you can check this article from WPBakery knowledge base:<\/p>\n\n\n\n

https:\/\/kb.wpbakery.com\/docs\/learning-more\/responsive-settings\/<\/strong><\/a><\/p>\n\n\n\n

For example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The Responsive options tab in Columns is a WPBakery default functionality (it’s not part of the theme) and it’s available to control columns, for more information about Responsive options in WPBakery you can check their documentation from here:
https:\/\/kb.wpbakery.com\/docs\/learning-more\/responsive-settings\/<\/a><\/p>\n\n\n\n

Note:<\/strong> sections and rows in WPBakery page builder are basically composed of columns and you can control the visibility of sections and rows by controlling the columns. For more information on WPBakery page builder concept you can check their articles from here
https:\/\/kb.wpbakery.com\/docs\/learning-more\/basic-concept\/<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n
CSS Classes to control responsive visibility<\/strong><\/h6>\n\n\n\n

If you want to display a section\/row only on Desktop,<\/strong> open the Section\/Row settings<\/strong> in WPBakery and add the following classes in the Extra class name<\/strong> field:<\/p>\n\n\n\n

d-none d-xl-flex<\/pre>\n\n\n\n

To hide a section\/row only on Desktop <\/strong>(and display only on tablet and mobile) open the Section\/Row settings<\/strong> and add the following classes in the Extra class name<\/strong> field:<\/p>\n\n\n\n

d-inline-flex d-xl-none <\/pre>\n\n\n\n

To hide a Section<\/strong>\/Row <\/strong>on desktop and tablet you can use:<\/p>\n\n\n\n

d-md-none<\/pre>\n\n\n\n

And to hide a Section<\/strong>\/Row <\/strong>only on mobile:<\/p>\n\n\n\n

d-none d-sm-flex<\/pre>\n\n\n\n

Please note if the “Content position”<\/strong> option in the Section\/Row<\/strong> settings is set to “Default”<\/strong> you need to replace the flex<\/code> in the class names above with block<\/code> (for example d-xl-block<\/code> instead of d-xl-flex<\/code>).<\/p>\n\n\n\n

Note: the provided classes above are examples of the default “Display” classes in Bootstrap<\/strong> HTML framework, for detailed information and the list of all possibilities you can check this page directly from Bootstrap website:<\/p>\n\n\n\n

https:\/\/getbootstrap.com\/docs\/4.6\/utilities\/display\/#hiding-elements<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"In WPBakery, you can control the width\/offset\/visibility of the columns across different screen sizes from the responsive options tab, for more information you can check this article from WPBakery knowledge base: https:\/\/kb.wpbakery.com\/docs\/learning-more\/responsive-settings\/ For example: The Responsive options tab in Columns is a WPBakery…","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97],"tags":[235,341,176,340,338,339,234,233,232,236,65],"yoast_head":"\nWPBakery responsive options for columns - Essentials Knowledge base<\/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:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WPBakery responsive options for columns - Essentials Knowledge base\" \/>\n<meta property=\"og:description\" content=\"In WPBakery, you can control the width\/offset\/visibility of the columns across different screen sizes from the responsive options tab, for more information you can check this article from WPBakery knowledge base: https:\/\/kb.wpbakery.com\/docs\/learning-more\/responsive-settings\/ For example: The Responsive options tab in Columns is a WPBakery...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\" \/>\n<meta property=\"og:site_name\" content=\"Essentials Knowledge base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pixfort\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-21T23:51:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-12T22:04:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png\" \/>\n<meta name=\"author\" content=\"pixfort\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pixfort\" \/>\n<meta name=\"twitter:site\" content=\"@pixfort\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"pixfort\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\"},\"author\":{\"name\":\"pixfort\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\"},\"headline\":\"WPBakery responsive options for columns\",\"datePublished\":\"2021-04-21T23:51:48+00:00\",\"dateModified\":\"2023-05-12T22:04:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\"},\"wordCount\":305,\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png\",\"keywords\":[\"columns\",\"desktop\",\"hide\",\"hide column\",\"hide row\",\"hide section\",\"mobile\",\"options\",\"responsive\",\"tablet\",\"WPBakery\"],\"articleSection\":[\"Quick answers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\",\"name\":\"WPBakery responsive options for columns - Essentials Knowledge base\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png\",\"datePublished\":\"2021-04-21T23:51:48+00:00\",\"dateModified\":\"2023-05-12T22:04:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns.png\",\"width\":1473,\"height\":878},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WPBakery responsive options for columns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"name\":\"Essentials Knowledge base\",\"description\":\"made by pixfort\",\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\",\"name\":\"pixfort\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"width\":322,\"height\":110,\"caption\":\"pixfort\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pixfort\",\"https:\/\/twitter.com\/pixfort\",\"https:\/\/www.instagram.com\/pixfort\/\",\"https:\/\/www.linkedin.com\/company\/pixfort\",\"https:\/\/www.youtube.com\/c\/Pixfort\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\",\"name\":\"pixfort\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"caption\":\"pixfort\"},\"description\":\"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub\",\"sameAs\":[\"http:\/\/hub.pixfort.com\"],\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WPBakery responsive options for columns - Essentials Knowledge base","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:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/","og_locale":"en_US","og_type":"article","og_title":"WPBakery responsive options for columns - Essentials Knowledge base","og_description":"In WPBakery, you can control the width\/offset\/visibility of the columns across different screen sizes from the responsive options tab, for more information you can check this article from WPBakery knowledge base: https:\/\/kb.wpbakery.com\/docs\/learning-more\/responsive-settings\/ For example: The Responsive options tab in Columns is a WPBakery...","og_url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/","og_site_name":"Essentials Knowledge base","article_publisher":"https:\/\/www.facebook.com\/pixfort","article_published_time":"2021-04-21T23:51:48+00:00","article_modified_time":"2023-05-12T22:04:25+00:00","og_image":[{"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png"}],"author":"pixfort","twitter_card":"summary_large_image","twitter_creator":"@pixfort","twitter_site":"@pixfort","twitter_misc":{"Written by":"pixfort","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#article","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/"},"author":{"name":"pixfort","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6"},"headline":"WPBakery responsive options for columns","datePublished":"2021-04-21T23:51:48+00:00","dateModified":"2023-05-12T22:04:25+00:00","mainEntityOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/"},"wordCount":305,"publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png","keywords":["columns","desktop","hide","hide column","hide row","hide section","mobile","options","responsive","tablet","WPBakery"],"articleSection":["Quick answers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/","name":"WPBakery responsive options for columns - Essentials Knowledge base","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website"},"primaryImageOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns-1024x610.png","datePublished":"2021-04-21T23:51:48+00:00","dateModified":"2023-05-12T22:04:25+00:00","breadcrumb":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#primaryimage","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2021\/04\/wpbakery-responsive-options-columns.png","width":1473,"height":878},{"@type":"BreadcrumbList","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/wpbakery-responsive-options-for-columns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/essentials.pixfort.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"WPBakery responsive options for columns"}]},{"@type":"WebSite","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","name":"Essentials Knowledge base","description":"made by pixfort","publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization","name":"pixfort","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","width":322,"height":110,"caption":"pixfort"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pixfort","https:\/\/twitter.com\/pixfort","https:\/\/www.instagram.com\/pixfort\/","https:\/\/www.linkedin.com\/company\/pixfort","https:\/\/www.youtube.com\/c\/Pixfort"]},{"@type":"Person","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6","name":"pixfort","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","caption":"pixfort"},"description":"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub","sameAs":["http:\/\/hub.pixfort.com"],"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/"}]}},"_links":{"self":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/5004"}],"collection":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=5004"}],"version-history":[{"count":16,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/5004\/revisions"}],"predecessor-version":[{"id":6942,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/5004\/revisions\/6942"}],"wp:attachment":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=5004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=5004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=5004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}