What is the meaning of xs, md, lg in CSS Flexbox system?

Let us assume that our screen is divided into 12 columns.

The xs part takes up when screen is extra small, Similarly small, medium and large classes as well, based on their respective screen size definition in CSS.

The example you provided:

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

For our sake lets assume these three columns are named as col-1, col-2 and col-3

On an extra small screen:

col-1 takes up all the 12 columns and the rest two of them take 6 each(on a new row)

On small screens

col-1 and col-3 takes up 3, while the middle one col-2 takes 6

Similarly

Medium screens

Large screens

P.S. Images are screenshots of the link you provided (by resizing the browser for each screen size)