Setting column classes for different screens using Bootstrap - html

Question

I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for
under 768px I would like to place them one under another.
file.html
<section className="about" id="about">
<div className="container-fluid">
<div className="row boxes justify-content-md-center">
<div className="col-sm-12 col-md-4 box">
<div className="innerBox">
<div className="icons">
<img src={iconEducation} className="img-responsive" />
</div>
<div className="box-body">
<h3 className="box-title">Title </h3>
<div className="box-list">
<div className="box-list-items">
<div className="item-ul"><img src={dot} className="img-responsive" /></div>
<div>
<p>Text</p>
</div>
</div>
<div className="box-list-items">
<div><img src={dot} className="img-responsive" /></div>
<div className="item-ul">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
The HTML code is the same for all three divs.
Problem
On large and medium screens I have two divs in one row and a third underneath in new row. For tablet screens the divs do not flow one under another but are still in the same row. The layout I want is two in one row and the third underneath.
file.css
.about{
padding: 127px 0 196px 0;
}
.about .row.boxes >div{
margin: 0 20px 0 20px;
}
.about .box{
height: 550px;
width: 100%;
background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
margin: auto;
color: black;
width: 100%;
overflow: hidden;
}
.box-list-items > div {
display: inline-block;
}
.box-list-items img {
height: 35%;
width: 35%;
}
.icons {
height: 95px;
width: 95px;
float: right;
margin: 7% 5% 5% 0;
}
.icons img {
width: 100%;
height: 100%;
}
h3.box-title{
font-size: 2.7em;
}
As I was going through the Bootstrap docs I thought that naming the class as .col-md-4 would align my divs for above 768px in same row one next to each other and underneath would place them in kind of display: box view.

Answer 1

theres is no use of #media only screen and all ,this will work:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">xyz</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">123</div>
</div>
</div>
you can check:
https://jsfiddle.net/bfos8ttd/

Answer 2

you need to put all the code in file.html in side a div with class row and test it again.

Answer 3

Go to this Link for bootstrap columns (col-lg-4, col-md-4, col-sm-6, col-xs-12)
And follow these media query as per your device.
#media only screen and (min-width:1024px) and (max-width: 1200px) {
}
#media only screen and (min-width:992px) and (max-width: 1023px) {
}
#media only screen and (min-width:768px) and (max-width: 991px) {
}
#media only screen and ( max-width: 767px ) {
}
#media only screen and ( max-width: 479px ) {
}

Answer 4

#user9347049 This wouldn't fit in the comments, so I'm putting it here for clarity.
Your container-fluid lets you use the entire width of the screen, but it's still just a container, that contains your rows and columns. You create rows, then, you add columns. As in:
<div class="container"> <!-- you can change this class to container-fluid class if you like -->
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
You can only have one container class. The row div contains all your cols divs for that row. You can have as many rows of columns as you need. If you adapt you code, you should start getting some of the results you're looking for before you look at the media query side of it.