I have a layout that looks like this on
lg
sm
lg
sm
.box-a.row.visible-lg.hidden-sm
.box-b.row.visible-lg.hidden-sm
.box-c.row.visible-lg.hidden-sm
.box-a.col-sm-4.visible-sm.hidden-lg
.box-b.col-sm-4.visible-sm.hidden-lg
.box-c.col-sm-4.visible-sm.hidden-lg
You can put all columns in a .row
and, because bootstrap grid is composable, each column can have both col-sm-4
and col-lg-12
classes.
The grid structure is:
col
xs|sm|md|lg
1-12
So, you are able to have any mix of them:
LG
(to UP) colspan is 12
: col-lg-12
SM
(to UP) colspan is 4
: col-sm-4
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
.box {
height: 50px;
background: lightcoral;
border: 1px solid green;
margin: 5px 0;
}
<section class="container">
<div class="row">
<div class="col-sm-4 col-lg-12">
<div class="box"></div>
</div>
<div class="col-sm-4 col-lg-12">
<div class="box"></div>
</div>
<div class="col-sm-4 col-lg-12">
<div class="box"></div>
</div>
</div>
</section>
PS: As of bootstrap works, if a DIV has a class visible-lg
that div will be shown only at LG
sizes, so, adding a hidden-sm
class isn't necessary: .box-a.row.visible-lg.hidden-sm
=> .box-a.row.visible-lg
.