reactjs - 如何在md断点上使用reactstrap以此顺序垂直堆叠左，右和中心列？

我正在使用reactstrap设置三列页面的样式

<Row>
    <Col md="4">Left</Col>
    <Col md="9">Center</Col>
    <Col md="5">Right</Col>
 </Row>

这是所需的布局：


 reactstrap layout docs没有给出示例，也没有详细说明如何实现。当前，它们以从左到右水平排列的相同顺序垂直堆叠。我已经尝试了className和md props的几种组合，但是还不能实现。如何使用reactstrap实现此布局？

最佳答案

Bootstrap-4并没有真正有用的推/拉类……因此一种解决方案是将center-Div设置两次。放在桌面的中间位置（隐藏在平板电脑上）...，放在平板电脑和较小尺寸的屏幕的末端（隐藏在桌面上）...

相关的HTML：

<div className="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div className="row">
    <div className="col-12 d-none d-sm-block col-sm-4 order-2" >CENTER</div>
    <div className="col-12 col-sm-4 order-1" >LEFT</div>
    <div className="col-12 col-sm-4 order-3" >RIGHT</div>
    <div className="col-12 d-sm-none order-4" >CENTER2</div>
  </div>
</div>

相关CSS：

.row div:nth-of-type(2){ background:lightpink; }
.row div:nth-of-type(3){ background:lightblue; }

工作stackblitz here

关于reactjs - 如何在md断点上使用reactstrap以此顺序垂直堆叠左，右和中心列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57445682/