Bootstrap grid is not working [duplicate] - css

Question

This question already has an answer here:
Bootstrap 3 mixin multiple make-*-column
(1 answer)
Closed 8 years ago.
I am trying to create a page layout using bootstrap. My layout something similar to below image.
To archive for this I tried using bootstrap grid fuctions.
This is how my html look like
<div class="myLayout">
<div class="col-1">
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
In my less file
.myLayout {
.make-row();
.col-1 {
.make-md-column(6);
.make-sm-column(7);
.make-xs-column(12);
background: black;
height: 100px;
}
.col-2 {
.make-md-column(3);
.make-sm-column(5);
.make-xs-column(6);
background: blue;
height: 100px;
}
.col-3 {
.make-md-column(3);
.make-sm-column(0);
.make-xs-column(6);
.visible-lg-block;
background: red;
height: 100px;
}
}
UPDATE:
This is generating CSS from about Less
.col-1 {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
background: black;
height: 100px;
}
#media (min-width: 992px) {
.col-1 {
float: left;
width: 50%;
}
}
#media (min-width: 768px) {
.col-1 {
float: left;
width: 58.33333333%;
}
}
#media (min-width: 1200px) {
.col-1 {
height: 292px;
}
}
.col-2 {
position: relative;
float: left;
width: 50%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
background: blue;
height: 100px;
}
#media (min-width: 992px) {
.col-2 {
float: left;
width: 25%;
}
}
#media (min-width: 768px) {
.col-2 {
float: left;
width: 41.66666667%;
}
}
#media (min-width: 1200px) {
.col-2 {
height: 292px;
}
}
.col-3 {
position: relative;
float: left;
width: 50%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
display: none !important;
background: red;
height: 100px;
}
#media (min-width: 992px) {
.col-3 {
float: left;
width: 25%;
}
}
#media (min-width: 768px) {
.col-3 {
float: left;
width: 0%;
}
}
#media (min-width: 1200px) {
.col-3 {
display: block !important;
}
}
But this is not working for my expecting result. Can somebody tell me what is wrong in my code?
Thank you.

Answer 1

There shouldn't be any need for custom CSS/LESS code to make this happen. You can do it with the existing Bootstrap grid system classes.
BOOTPLY
div {
height: 200px;
}
.first {
background-color: black;
}
.second {
background-color: blue;
}
.third {
background-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="first col-sm-6 col-xs-12"></div>
<div class="second col-lg-3 col-sm-6 col-xs-12"></div>
<div class="third col-lg-3 visible-lg-inline"></div>