success to switch the button types by the device size

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -93,7 +93,7 @@ const GrowiSubNavigation = (props) => {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor, isPageExist,
   } = pageContainer.state;
 
-  const { isGuestUser } = appContainer;
+  const { isGuestUser, isMobile } = appContainer;
   const isEditorMode = editorMode !== 'view';
   // Tags cannot be edited while the new page and editorMode is view
   const isTagLabelHidden = (editorMode !== 'edit' && !isPageExist);
@@ -102,6 +102,25 @@ const GrowiSubNavigation = (props) => {
     navigationContainer.setEditorMode(viewType);
   }
 
+  function renderThreeStrandedButton() {
+    return (
+      <ThreeStrandedButton
+        onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+        isBtnDisabled={isGuestUser}
+        editorMode={editorMode}
+      />
+    );
+  }
+  function renderTwoStrandedButton() {
+    return (
+      <TwoStrandedButton
+        onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+        isBtnDisabled={isGuestUser}
+        editorMode={editorMode}
+      />
+    );
+  }
+
   return (
     <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
 
@@ -134,16 +153,7 @@ const GrowiSubNavigation = (props) => {
           <div className={`${isEditorMode ? 'ml-2' : 'mt-2'}`}>
             {pageContainer.isAbleToShowThreeStrandedButton && (
               <>
-                <ThreeStrandedButton
-                  onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
-                  isBtnDisabled={isGuestUser}
-                  editorMode={editorMode}
-                />
-                <TwoStrandedButton
-                  onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
-                  isBtnDisabled={isGuestUser}
-                  editorMode={editorMode}
-                />
+                {isMobile ? renderTwoStrandedButton() : renderThreeStrandedButton()}
               </>
             )}
           </div>