26
  • I try to follow this documentation, but i can't make this work.
  • I want to make the boxes break into one column for small screens, just like the follow examples.

enter image description here Into enter image description here

Do i have to use css insted of default components?

Jacob van Lingen
  • 8,989
  • 7
  • 48
  • 78
D0rm1nd0
  • 1,333
  • 1
  • 15
  • 19

2 Answers2

61

Use this code: 

import 'antd/dist/antd.css';
import { Row, Col } from 'antd';

  <Row>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
  </Row>

or:

  <div className="ant-row">
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
  </div>
Fatemeh Qasemkhani
  • 1,942
  • 1
  • 15
  • 25
  • 4
    Notice `xs={24}` is a shortcut for `xs={{ span: 24 }}`. So if you also want to change the order of the columns depending on screen ratio, you could do for instance something like `` – Jacob van Lingen Jan 15 '22 at 13:56
2

Scroll down to the last section of the Grid documentation you've posted:

<div nz-row>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
  <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">Col</div>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
</div>

Having in mind that the ant row can contain 24 cols and you mentioning Bootstrap in your post (this is regarding sizing: xs, sm, md, etc) - I believe you can adjust everything else.

Bullsized
  • 362
  • 4
  • 7