React Bootstrap: 对齐col，使右边的col显示在左边的col之上

Question

我想知道 React Bootstrap 是否有办法让两列并排显示，但每当屏幕变小时，将右侧的列显示在左侧列的顶部而不是相反。

这是我的代码：

import "./styles.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";

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

export default function App() {
  return (
    <div className="App">
      <Row>
        <Col sm={8}>
          <Card>
            <Card.Body>
              <Card.Title>Left Card/Bottom Card</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </Col>
        <Col sm={4}>
          <Card>
            <Card.Body>
              <Card.Title>Right Card/Top Card</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

此外，这里有一个 link 到 codesandbox

Answer 1

是的，使用顺序类..

       <Container className="App" fluid={true}>
          <Row>
            <Col sm={8} className="order-last order-sm-first">
              <Card>
                ...
              </Card>
            </Col>
            <Col sm={4}>
              <Card>
                ...
              </Card>
            </Col>
          </Row>
       </Container>

Codeply