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>
  );
}

另外，这是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