diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx
index 321f5190835..e71bd83edd3 100644
--- a/packages/react-core/src/components/Divider/Divider.tsx
+++ b/packages/react-core/src/components/Divider/Divider.tsx
@@ -14,7 +14,7 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The component type to use */
   component?: 'hr' | 'li' | 'div';
-  /** Flag to indicate the divider is vertical (must be in a flex layout) */
+  /** @deprecated Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) */
   isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
@@ -25,6 +25,15 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. */
+  orientation?: {
+    default?: 'vertical' | 'horizontal';
+    sm?: 'vertical' | 'horizontal';
+    md?: 'vertical' | 'horizontal';
+    lg?: 'vertical' | 'horizontal';
+    xl?: 'vertical' | 'horizontal';
+    '2xl'?: 'vertical' | 'horizontal';
+  };
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -32,6 +41,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   isVertical = false,
   inset,
+  orientation,
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -42,6 +52,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         styles.divider,
         isVertical && styles.modifiers.vertical,
         formatBreakpointMods(inset, styles),
+        formatBreakpointMods(orientation, styles),
         className
       )}
       {...(component !== 'hr' && { role: 'separator' })}
diff --git a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
index 335cfaf7d1d..6b940d6841c 100644
--- a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
+++ b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
@@ -22,7 +22,11 @@ test('vertical divider', () => {
   const { asFragment } = render(
     <Flex>
       <FlexItem>first item</FlexItem>
-      <Divider isVertical />
+      <Divider
+        orientation={{
+          default: 'vertical'
+        }}
+      />
       <FlexItem>second item</FlexItem>
     </Flex>
   );
diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md
index 93cf361ae2a..6d9b86d78e4 100644
--- a/packages/react-core/src/components/Divider/examples/Divider.md
+++ b/packages/react-core/src/components/Divider/examples/Divider.md
@@ -46,3 +46,9 @@ propComponents: ['Divider']
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```
+
+### Switch orientation at various breakpoints
+
+```ts file='./DividerOrientationVariousBreakpoints.tsx'
+```
+
diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
new file mode 100644
index 00000000000..b182293baaf
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      orientation={{
+        default: 'vertical',
+        sm: 'horizontal',
+        md: 'vertical',
+        lg: 'horizontal',
+        xl: 'vertical',
+        '2xl': 'horizontal'
+      }}
+    />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
index 6742f01b894..57054866cde 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
@@ -4,7 +4,11 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlex: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+    />
     <FlexItem>second item</FlexItem>
   </Flex>
 );
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
index f9738446b41..18e9f27e54a 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
@@ -4,7 +4,12 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+      inset={{ default: 'insetMd' }}
+    />
     <FlexItem>second item</FlexItem>
   </Flex>
 );
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
index e82d433546d..c47a605b781 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
@@ -5,7 +5,9 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
-      isVertical
+      orientation={{
+        default: 'vertical'
+      }}
       inset={{
         default: 'insetMd',
         md: 'insetNone',
@@ -13,6 +15,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
         xl: 'insetXs'
       }}
     />
-    <FlexItem>first item</FlexItem>
+    <FlexItem>second item</FlexItem>
   </Flex>
 );
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index 4b933f9ee0c..f0a785af4d6 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -561,7 +561,14 @@ const AggregateStatusCards: React.FunctionComponent = () => {
                   <a href="#">{count}</a>
                 </FlexItem>
               </Flex>
-              {content.length > 1 && index === 0 && <Divider key={`${index}_d`} isVertical />}
+              {content.length > 1 && index === 0 && (
+                <Divider
+                  key={`${index}_d`}
+                  orientation={{
+                    default: 'vertical'
+                  }}
+                />
+              )}
             </React.Fragment>
           ))}
         </Flex>
@@ -1255,8 +1262,10 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-1" component="div">
@@ -1507,7 +1516,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1571,7 +1586,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1656,7 +1677,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1720,7 +1747,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1805,7 +1838,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1869,7 +1908,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1994,7 +2039,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2058,7 +2109,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2140,7 +2197,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2204,7 +2267,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2286,7 +2355,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2350,7 +2425,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2444,8 +2525,10 @@ const TrendCard1: React.FunctionComponent = () => {
   ];
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1" component="div">
@@ -2626,8 +2709,10 @@ CardLogViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
           <CardHeader className="pf-u-align-items-flex-start">
@@ -2743,8 +2828,10 @@ CardEventViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
           <CardHeader className="pf-u-align-items-flex-start">