diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index abd32016131cabf84f0ccf0a3dd64078b57de877..d830c99afa8584ff7537a3f46ca94b9260c19a9e 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1966,6 +1966,42 @@ options.registry.topMenuColor = options.Class.extend({
     },
 });
 
+/**
+ * Manage the visibility of snippets on mobile.
+ */
+options.registry.MobileVisibility = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Allows to show or hide the associated snippet in mobile display mode.
+     *
+     * @see this.selectClass for parameters
+     */
+    showOnMobile(previewMode, widgetValue, params) {
+        const classes = `d-none d-md-${this.$target.css('display')}`;
+        this.$target.toggleClass(classes, !widgetValue);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'showOnMobile') {
+            const classList = [...this.$target[0].classList];
+            return classList.includes('d-none') &&
+                classList.some(className => className.startsWith('d-md-')) ? '' : 'true';
+        }
+        return await this._super(...arguments);
+    },
+});
+
 /**
  * Hide/show footer in the current page.
  */
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 9a8035325aef5f49a60a18d49b42e36f983b27c1..241933b6324f2807ebf602b62ca3abef36176db8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -482,9 +482,9 @@
     </div>
 
     <!-- Mobile display options -->
-    <div data-option-name="showMobile" data-selector="section .row > div"
+    <div data-js="MobileVisibility" data-option-name="showMobile" data-selector="section .row > div"
          data-exclude=".s_col_no_resize.row > div">
-        <we-checkbox string="Shown On Mobile" data-select-class="d-none d-md-block|" data-no-preview="true"/>
+        <we-checkbox string="Shown On Mobile" data-show-on-mobile="true" data-no-preview="true"/>
     </div>
 
     <div data-js="sizing_y"