Reducing the width of a column and understanding css used - twitter-bootstrap-3

Question

I am looking at a react code with material UI and trying to understand
the className used like below.
Can you explain these two lines please? I thought you can only have a maximum of 12 columns.
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
I want to reduce the width of the Invoice covered and Reason for credit
which means reducing the width of the column. How can I achieve this?
<div className="row customer-form-layout">
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
<div className="customer-form-details">
<span>{this.props.customer.CustomerName}</span><br/>
<span>Customer #: <b>{this.props.customer.biCustomerNumber }</b></span>
</div>
<div className="covered-section">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<FormControl className="form-control">
<InputLabel htmlFor="invoice-number01" shrink>Invoice
Covered*</InputLabel>
<Select
value=''
inputProps={{
name: 'Test-number02',
id: 'Test-number02',
}}
>
<MenuItem value='1234567890'>1234567890</MenuItem>
<MenuItem value='2345678901'>2345678901</MenuItem>
</Select>
</FormControl>
</div>
</div>
</div>
<FormControl fullWidth className="form-control">
<InputLabel htmlFor="reason-field-value" shrink>Reason for Credit
</InputLabel>
<TextField
id="reason-field-value"
multiline
rows="8"
margin="normal"
/>
</FormControl>
</div>

Answer 1

For bootstrap 3, a col-xs-12 class means, below xs (<768px), the element will take 12 columns.
While col-sm-6, means above sm (≥768px), it will take up 6 columns.
Therefore, this div
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
will take full width below 768px. However, when it reaches 768px and above, it will take 50% width.
Which also means, it is completely equivalent to this:
<div className="col-xs-12 col-sm-6">
Reference: https://getbootstrap.com/docs/3.4/css/#grid-options