I want to make a responsive navbar using Ant design hat hides the middle column in small view port

Question

I would like to create a 3-column nav bar and when the screen size is small, hide the search in the middle. When I set XS to a column, this rule should be applied when screens is tool small or small. But it does the opposite. it means it hides the middle column in the large view ports.

PS. I do not want to use css and would like to do it with ant grid properties only.

https://codesandbox.io/s/jovial-johnson-nkg9p?file=/src/App.js:249-251

import "./styles.css";

import "antd/dist/antd.css";

import { Row, Col, Layout, AutoComplete } from "antd";

export default function App() {
  return (
    <Row align="middle">
      <Col flex="150px">Logo</Col>
      <Col
        flex={1}
        sm={{
          flex: 0,
          span: 0
        }}
        md={{
          flex: 1
        }}
      >
        <AutoComplete
          style={{
            width: 200
          }}
          placeholder="search"
        />
      </Col>
      <Col flex="150px">User Menu</Col>
    </Row>
  );
}