Reactjs 当屏幕在sass中变小时，将jsx元素移动到新行

我有一个来自客户端的现有组件（来自storybook），我只是将数据传递给它。我向标题传递了一个自定义元素，但我无法实现我要做的事情。当屏幕变小时，我希望“版本”移到下一行

正常屏幕：

小屏幕：当前行为

小屏幕：我需要实现的行为（我刚刚在画图上编辑了这个）

代码：

  const drawerHeader = (
    <div className="readmore-drawer-header">
      <div>Very very very very long title</div> 
      <div className="version"> version <span className="version-number">v28.0</span></div>
    </div>
  ); 

return (
    <>
      <div className="consent-description">
        <button className="drawer-button" onClick={openMenu}>
          Read More
        </button>
      </div>
      <Drawer className="readmore-drawer"
        title={drawerHeader}
        anchor={anchorPosition}
        open={showDrawer}
        footer={drawerFooter}
        ModalProps={{}}
        onClose={() => {
          setShowDrawer(!showDrawer);
        }}>
        <div className="additional-information">
          <div className="consent-body" dangerouslySetInnerHTML={{ __html: "drawer body" }} />
        </div>
      </Drawer>
    </>
  );
}

.readmore-drawer {
.drawer-content-header {
    .card-title {
        width: 100%;
        padding-right: rem-calc(15);
        .readmore-drawer-header {
            display: flex;
            justify-content: space-between;
            // @include breakpoint(sm){
            //     flex-direction: column;
            // }  
            .version {
                font-size: 12px;
                align-self: center;
                .version-number {
                    font-family: 'Interstate-Bold';
                }
            }
        }
    }
}
}