ANT 设计推拉混乱

Question

我有两列设置如下：

<Row>
    <Col xs={24} lg={12}>
        <p>Column 1</p>
    </Col>
    <Col xs={24} lg={12}>
        <p>Column 2</p>
    </Col>
</Row>

我如何使用ANT Design Doc中的push或pull使第 2 列在较小的屏幕中位于第 1 列之上？

Answer 1

我们不能在 xs 列上推/拉，因为每一列都占据了整个宽度。 相反，我们可以先将第 2 列放在顶部，然后在视口较大时更改顺序。 在大断点处，我们可以将第 2 列向右推，将第 1 列向左拉。

Grid API允许我们为断点传递包含span 、 push和pull等道具的对象。

<Row>
  <Col xs={24} lg={{span: 12, push: 12}}>
    <p>Column 2</p>
  </Col>
  <Col xs={24} lg={{span: 12, pull: 12}}>
    <p>Column 1</p>
  </Col>
</Row>