如何在 md 断点上使用 reactstrap 按该顺序垂直堆叠左列、右列和中列？

Question

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

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

这是所需的布局：

reactstrap layout docs 没有给出示例，也没有详细说明如何实现。目前，它们垂直堆叠的顺序与它们从左到右水平排列的顺序相同。我尝试了几种 className 和 md 道具的组合，但未能实现这一点。这个布局怎么用reactstrap实现的？

Answer 1

Bootstrap-4 没有真正有用的 push/pull 类...所以一个解决方案是 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

Answer 2

我找到了 Toni Michel Caubet (.scss)

建议的简单解决方案

  @media(max-width: 768px) {
    .main-section {
      display: flex;
    }
    .left-col {
      order: 1;
    }

    .center-col {
      order: 3;
    }

    .right-col {
      order: 2;
    }
  }

md断点是768px。此硬编码值将替换为 bootstrap 个断点。

如何在 md 断点上使用 reactstrap 按该顺序垂直堆叠左列、右列和中列？

How can I vertically stack left, right, and center columns in that order with reactstrap on md breakpoint?

reactjs

react-bootstrap

bootstrap-4

reactstrap