如何反转reactstrap中的列？

Posted 2023-03-23

【中文标题】如何反转reactstrap中的列？

【英文标题】：How to reverse columns in reactstrap?

【发布时间】：2021-04-07 14:18:52

【问题描述】：

我想实现这样的东西

在桌面上：A B 在手机上：B 一个

我尝试过使用 React Strap 网格系统，但找不到让它工作的方法 我在 nextjs 中使用 reactstrap 库，

【参考方案1】：

Reactstrap 还提供了一个引导库

在 _app.js 中是这样导入的

import "../assets/css/bootstrap.min.css";

现在它还支持最新版本的 bootstrap ，即 bootstrap 4

col-sm-push-4 , col-sm-pull-4 类已弃用，无法使用。

Bootstrap 4 提供了其他 flex 类以使其具有响应性

解决办法

 <Container fluid>
        <Row className="flex-column-reverse flex-md-row">
        <Col className="col-md-8">
          <h1>AAAAA</h1>
       </Col>
       <Col className="col-md-4">
       <h1>BBBBB</h1>

       </Col>
        </Row>
</Container>

【讨论】：

Css flex flex-direction: row-reverse; 会帮助你