diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 915eb2aaee841954350af0303f4bc36b67067d9f..6dbf7585283313357fe012e5ad32464be27e7e4c 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLoadingIcon, GlButton, GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
@@ -97,6 +98,9 @@ export default {
     isSaving() {
       return this.filesToBeSaved.length > 0;
     },
+    isMobile() {
+      return GlBreakpointInstance.getBreakpointSize() === 'xs';
+    },
     canCreateDesign() {
       return this.permissions.createDesign;
     },
@@ -429,7 +433,7 @@ export default {
       <vue-draggable
         v-else
         :value="designs"
-        :disabled="!isLatestVersion || isReorderingInProgress"
+        :disabled="!isLatestVersion || isReorderingInProgress || isMobile"
         v-bind="$options.dragOptions"
         tag="ol"
         draggable=".js-design-tile"
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 87531e8b645c337f9a07231fbc524f262b6f7a0a..087655d10f7f14a401034e5346148d2520a0cbc4 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue';
 
 import VueApollo, { ApolloMutation } from 'vue-apollo';
 import VueRouter from 'vue-router';
+import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -762,6 +763,25 @@ describe('Design management index page', () => {
       expect(findDesigns().at(0).props('id')).toBe('2');
     });
 
+    it.each`
+      breakpoint | reorderDisabled
+      ${'xs'}    | ${true}
+      ${'sm'}    | ${false}
+      ${'md'}    | ${false}
+      ${'lg'}    | ${false}
+      ${'xl'}    | ${false}
+    `(
+      'sets draggable disabled value to $reorderDisabled when breakpoint is $breakpoint',
+      async ({ breakpoint, reorderDisabled }) => {
+        jest.spyOn(breakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint);
+
+        createComponentWithApollo({});
+        await waitForPromises();
+
+        expect(draggableAttributes().disabled).toBe(reorderDisabled);
+      },
+    );
+
     it('prevents reordering when reorderDesigns mutation is in progress', async () => {
       createComponentWithApollo({});
       await moveDesigns(wrapper);