diff --git a/src/question_ranking.ts b/src/question_ranking.ts
index b4bbd8f802..a4a48ee545 100644
--- a/src/question_ranking.ts
+++ b/src/question_ranking.ts
@@ -44,14 +44,14 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
   public get rootClass(): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
-      .append(this.cssClasses.rootMobileMod, IsMobile)
+      .append(this.cssClasses.rootMobileMod, this.isMobileMode())
       .append(this.cssClasses.rootDisabled, this.isReadOnly)
       .append(this.cssClasses.rootDesignMode, !!this.isDesignMode)
       .append(this.cssClasses.itemOnError, this.hasCssError())
       .append(this.cssClasses.rootDragHandleAreaIcon, settings.rankingDragHandleArea === "icon")
       .append(this.cssClasses.rootSelectToRankMod, this.selectToRankEnabled)
-      .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.selectToRankAreasLayout === "horizontal")
-      .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.selectToRankAreasLayout === "vertical")
+      .append(this.cssClasses.rootSelectToRankAlignHorizontal, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "horizontal")
+      .append(this.cssClasses.rootSelectToRankAlignVertical, this.selectToRankEnabled && this.renderedSelectToRankAreasLayout === "vertical")
       .toString();
   }
 
@@ -500,13 +500,21 @@ export class QuestionRankingModel extends QuestionCheckboxModel {
    * @see selectToRankAreasLayout
   */
   public get selectToRankAreasLayout(): string {
-    if (IsMobile) return "vertical";
-    return this.getPropertyValue("selectToRankAreasLayout", "horizontal");
+    return this.getPropertyValue("selectToRankAreasLayout");
   }
   public set selectToRankAreasLayout(val: string) {
     this.setPropertyValue("selectToRankAreasLayout", val);
   }
 
+  public get renderedSelectToRankAreasLayout(): string {
+    if (this.isMobileMode()) return "vertical";
+    return this.selectToRankAreasLayout;
+  }
+
+  public isMobileMode(): boolean {
+    return IsMobile;
+  }
+
   @property({ localizable: { defaultStr: "selectToRankEmptyRankedAreaText" } }) selectToRankEmptyRankedAreaText: string;
   @property({ localizable: { defaultStr: "selectToRankEmptyUnrankedAreaText" } }) selectToRankEmptyUnrankedAreaText: string;
 
diff --git a/tests/question_ranking_tests.ts b/tests/question_ranking_tests.ts
index f4ef112109..3d054d01af 100644
--- a/tests/question_ranking_tests.ts
+++ b/tests/question_ranking_tests.ts
@@ -411,4 +411,26 @@ QUnit.test("selectToRankEnabled : checkMaxSelectedChoicesUnreached", function (a
   questionModel.value = ["11", "22"];
   assert.equal(questionModel.checkMaxSelectedChoicesUnreached(), false, "MaxSelectedChoices limit reached");
 });
+
+QUnit.test("Ranking: renderedSelectToRankAreasLayout", function (assert) {
+  const selectToRankEnabled = true;
+  const withDefaultValue = false;
+  const questionModel = createRankingQuestionModel(selectToRankEnabled, withDefaultValue);
+
+  assert.equal(questionModel.selectToRankAreasLayout, "horizontal", "default");
+  assert.equal(questionModel.renderedSelectToRankAreasLayout, "horizontal", "default");
+
+  questionModel.selectToRankAreasLayout = "vertical";
+  assert.equal(questionModel.selectToRankAreasLayout, "vertical", "set vertical");
+  assert.equal(questionModel.renderedSelectToRankAreasLayout, "vertical", "set vertical");
+
+  questionModel.isMobileMode = ()=>{ return true; }; // set mobile env
+
+  assert.equal(questionModel.selectToRankAreasLayout, "vertical", "set vertical");
+  assert.equal(questionModel.renderedSelectToRankAreasLayout, "vertical", "'vertical' by default on mobile");
+
+  questionModel.selectToRankAreasLayout = "horizontal";
+  assert.equal(questionModel.selectToRankAreasLayout, "horizontal", "default");
+  assert.equal(questionModel.renderedSelectToRankAreasLayout, "vertical", "'vertical' always on mobile");
+});
 // EO selectToRankEnabled
\ No newline at end of file