reactjs - 使用 React-Bootstrap 更改移动 View 中的列顺序

Question

我在我的 React 项目中使用 React-Bootstrap，并且想在移动或 XS View 中更改列顺序。

下面的代码为我提供了一个不错的 2 列布局，并在视口(viewport)为 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 View 中位于顶部。

所以我加了 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>