Bootstrap grid specific layout - css

Question

how do I make the bootstrap grid like this?
if ≥ 576px:
if < 576px:
Thank you.

Answer 1

Bootstrap's col-xs-$ has the lowest max-width of 768px. I think you will have to add another class to your columns and then specify your CSS rule to that class
For example :
<div class="col-xs-4 smaller-div-class">
Col 1
</div>
<div class="col-xs-4 smaller-div-class">
Col 2
</div>
<div class="col-xs-4 smaller-div-class">
Col 3
</div>
and so on... and add the style in smaller-div-class
#media screen and (max-size<576px){
.smaller-div-class{
width: 100% !important;
}
}

Answer 2

Bootstrap rows each contain 12 columns, and each column should be confined to a row.
Considering you want three columns, you should specify that each has a width of 4 columns, as 12 / 3 = 4. This is done by using col-sm-4 as a class name.
The col-sm- prefix for columns is based on the 'Small' screen sizes, and actually defaults to the exact width you want of 576px:
This can be seen in the following example:
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: green;
}
.col-sm-4 {
height: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="row">
<div class="col-sm-4 one"></div>
<div class="col-sm-4 two"></div>
<div class="col-sm-4 three"></div>
</div>
Hope this helps! :)

Answer 3

<div class="container">
<div class="row">
<div class="col-sm-4 col-12">
<h2>col1</h2>
</div>
<div class="col-sm-4 col-12">
<h2>col2</h2>
</div>
<div class="col-sm-4 col-12">
<h2>col3</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-12">
<h2>col4</h2>
</div>
<div class="col-sm-4 col-12">
<h2>col5</h2>
</div>
<div class="col-sm-4 col-12">
<h2>col6</h2>
</div>
</div>
</div>