<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-10 col-md-1 col-lg-9">
Hello World
</div>
<div class="col-xs-6 col-sm-2 col-md-10 col-lg-1">
Hellow World 2
</div>
<div class="col-xs-2 col-sm-12 col-md-1 col-lg-2">
Hellow World 2
</div>
</div>
</div>
/*Downloaded from https://www.codeseek.co/oieduardorabelo/responsive-grid-KwJEed */
@cols: 12;
@gutter: 12px;
@sm-min: 640px;
@md-min: 960px;
@lg-min: 1280px;
*, *:after, *:before {
box-sizing: border-box;
}
.clearfix() {
&:after {
content: " ";
clear: both;
display: table;
}
}
.container {
.clearfix();
margin-left: auto;
margin-right: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.row {
.clearfix();
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
.grid(@col, @class, @i: 1) when (@i =< @col) {
.col-@{class}-@{i} {
float: left;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
position: relative;
width: (@i * 100%) / @col;
}
.grid(@col, @class, (@i + 1));
}
.grid(@cols, xs);
@media all and (min-width: @sm-min) {
.grid(@cols, sm);
}
@media all and (min-width: @md-min) {
.grid(@cols, md);
}
@media all and (min-width: @lg-min) {
.grid(@cols, lg);
}
/*Downloaded from https://www.codeseek.co/oieduardorabelo/responsive-grid-KwJEed */
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
