使用 React-Bootstrap 更改移动视图中的列顺序

Question

我在我的 React 项目中使用 React-Bootstrap，并希望在移动或 XS 视图中更改列顺序。

下面的代码为我提供了一个不错的 2 列布局，并在视口为 xs 时响应 1 列：

    return (
      <Container>
        <Row className={styles.section}>
          <Col xs={12} md={6}>
            <h2>{this.props.heading}</h2>
            <p>{this.props.content}</p>
          </Col>
          <Col>
            <p>
              <img src={this.props.img} />
            </p>
          </Col>
        </Row>
      </Container>
    );

我想让第二列（带有 的列{this.props.img}）在 xs/mobile 视图中位于顶部。

所以我添加xs={{ order: 1 }}到该列：

<Col xs={{ order: 1 }}>
   <p>
     <img src={this.props.img} />
   </p>
</Col>

然而这并没有奏效。使用 vanilla Bootstrap，您可以添加class="order-xs-1"，这将起作用。

任何有关这方面的提示都会很棒，谢谢！

Answer 1

我想你应该同时定义span和order每个Col。像这样的东西：

<Container>
  <Row>
    <Col xs={{ span: 12, order: 2 }} md={{ span: 6, order: 1 }}> First col </Col>
    <Col xs={{ span: 12, order: 1 }} md={{ span: 6, order: 2 }}> Second col </Col>
  </Row>
</Container>