Columns in bootstrap
This is what I currently have on small devices.
This is the code for the image above.
<div class="row">
<div class="col-sm-6">
<div class="alert alert-info">Chart 1</div>
</div>
<div class="col-sm-6">
<div class="alert alert-info">Chart 2</div>
</div>
<div class="col-sm-12">
<div class="alert alert-danger">Legend</div>
</div>
</div>
When this is displayed on an additional small device, the order is as follows:
Chart 1
Chart 2
Legend
Expected, but not what I need. I want it to be like this:
Chart 1
Legend
Chart 2
Is this possible with Bootstrap?
+3
source to share
2 answers
Here is your fixed code
<div class="row">
<div class="col-sm-6">
<div class="alert alert-info">Chart 1</div>
</div>
<div class="visible-sm visible-xs hidden-md hidden-lg">
<div class="col-sm-12">
<div class="alert alert-danger">Legend</div>
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-info">Chart 2</div>
</div>
<div class="hidden-sm hidden-xs visible-md visible-lg">
<div class="col-sm-12">
<div class="alert alert-danger">Legend</div>
</div>
</div>
</div>
Greetings!
+2
source to share
You can wrap A and B blocks in an extra block and increase the B block width on a wide screen.
This solution works well if block C is not taller than block A. But you don't need to repeat block B twice.
https://codepen.io/glebkema/pen/YVVvVL
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
/* Heart of the matter */
@media (min-width: 768px ) {
.col-sm-double-width {
margin-right: -100%;
width: 200%;
}
}
/* Decorations */
.container {
margin-top: 14px;
}
.col-a,
.col-b,
.col-c {
color: #fff;
font-size: 28px;
font-weight: bold;
min-height: 80px;
padding-top: 6px;
}
.col-a { background: #9c6; }
.col-b { background: #f93; }
.col-c { background: #69c; }
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-12 col-a">A</div>
<div class="col-xs-12 col-b col-sm-double-width">B</div>
</div>
</div>
<div class="col-sm-6 col-c">C</div>
</div>
</div>
+1
source to share