diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index b8ca04e80..565e9f041 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -21,7 +21,7 @@ export default {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
+<OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
     <template #item="{ item }">
         {{ item.name }}
     </template>
@@ -29,8 +29,8 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card lg:flex lg:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
@@ -54,8 +54,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card lg:flex lg:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
             <template #item="{ item }">
                 {{ item.name }}
             </template>
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index 951e35c52..1573a05a0 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -2,10 +2,10 @@
     <DocSectionText v-bind="$attrs">
         <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
     </DocSectionText>
-    <div class="card lg:flex lg:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 items-center gap-4">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
                     <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
@@ -30,9 +30,9 @@ export default {
             products: null,
             code: {
                 basic: `
-<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
+<OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
     <template #item="{ item }">
-        <div class="flex flex-wrap p-1 items-center gap-4">
+        <div class="flex flex-wrap p-1 items-center gap-4 w-full">
             <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
@@ -48,10 +48,10 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card lg:flex lg:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 items-center gap-4">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
                     <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
@@ -83,10 +83,10 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card lg:flex lg:justify-center">
-        <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
+    <div class="card sm:flex sm:justify-center">
+        <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
             <template #item="{ item }">
-                <div class="flex flex-wrap p-1 items-center gap-4">
+                <div class="flex flex-wrap p-1 items-center gap-4 w-full">
                     <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>