diff --git a/src/components/form-spinbutton/_spinbutton.scss b/src/components/form-spinbutton/_spinbutton.scss
index bb63cd7d26f..e2c28034143 100644
--- a/src/components/form-spinbutton/_spinbutton.scss
+++ b/src/components/form-spinbutton/_spinbutton.scss
@@ -9,6 +9,14 @@
     height: auto;
     width: auto;
   }
+  
+  @at-root {
+    // Prevent the buttons from reversing order on in horizontal RTL mode
+    [dir="rtl"] &:not(.flex-column),
+    &[dir="rtl"]:not(.flex-column) {
+      flex-direction: row-reverse;
+    }
+  }
 
   output {
     font-size: inherit;
diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js
index 07d289f4501..ec15b92f366 100644
--- a/src/components/form-spinbutton/form-spinbutton.js
+++ b/src/components/form-spinbutton/form-spinbutton.js
@@ -546,10 +546,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
           ...this.$attrs,
           role: 'group',
           lang: this.computedLocale,
-          tabindex: isDisabled ? null : '-1',
-          // We want to keep the order of the buttons regardless
-          // of locale (flex will re-order based on rtl/ltr)
-          dir: 'ltr'
+          tabindex: isDisabled ? null : '-1'
         },
         on: {
           keydown: this.onKeydown,
diff --git a/src/components/form-spinbutton/form-spinbutton.spec.js b/src/components/form-spinbutton/form-spinbutton.spec.js
index 047c85dea00..408d82f19da 100644
--- a/src/components/form-spinbutton/form-spinbutton.spec.js
+++ b/src/components/form-spinbutton/form-spinbutton.spec.js
@@ -17,8 +17,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -77,8 +75,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -136,8 +132,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -187,8 +181,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).not.toContain('align-items-stretch')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     // Should have 3 child elements (btn, output, btn)
     expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
@@ -774,8 +766,6 @@ describe('form-spinbutton', () => {
     expect(wrapper.classes()).not.toContain('focus')
     expect(wrapper.attributes('role')).toEqual('group')
     expect(wrapper.attributes('tabindex')).toEqual('-1')
-    // We always have LTR to ensure the flex order stays ltr
-    expect(wrapper.attributes('dir')).toEqual('ltr')
 
     const $output = wrapper.find('output')
     expect($output.exists()).toBe(true)