How to wrap a column under a shorter column in bootstrap
Hey. I'm trying to wrap the shorter column (blue) under the first column (red) for large devices, but stay on the end on mobile devices. The push and pull bootstrap doesn't work (possibly due to its two-line wrapping). I was also thinking about floats, but that already comes in the column div as part of Bootstrap and it didn't help.
Here's bootply with my layout div, works great for mobile but not large screens: https://www.bootply.com/3WKeAukbz0
source to share
Just use the Bootstrap pull-right
..
https://www.bootply.com/WARW7AOdQz
<div class="row">
<div class="col-sm-5 col-xs-12" style="height:200px; background-color:red;">text</div>
<div class="col-sm-7 pull-right" style="height:500px; background-color:green;">text</div>
<div class="col-sm-5 col-xs-12" style="height:100px; background-color:blue;">text</div>
</div>
source to share
If you don't mind using flexbox , you can do something like this:
Html
<div class="row flex single-padding">
<span class='left-columns'>
<div class="half-margin" id="first">Text</div>
<div class="half-margin" id="second">Text</div>
</span>
<div class="half-margin" id="third">Text</div>
</div>
CSS
/* atomic css */
.flex {
display: flex;
}
.single-padding {
padding: 1rem;
}
.half-margin {
margin: 0.5rem;
}
/* styles */
.left-columns {
flex: 1 1 100%;
}
#first {
height: 200px;
background-color: red;
}
#second {
height: 500px;
background-color: green;
flex: 1 1 100%;
}
#third {
height: 100px;
background-color: blue;
flex: 1 1 100%;
}
@media (min-width: 576px) {
.left-columns {
flex-direction: column;
flex-basis: 42%;
}
#second {
background-color: blue;
height: 100px;
}
#third {
flex-basis: 48%;
height: 500px;
background-color: green;
}
}
See CodePen Demo
Note. If you want tablet devices to display a mobile view, you can simply increase the breakpoint in the media request to 768px
.
source to share
Unfortunately, there is no way to stack divs like there is in Bootstrap. But you can do it with some help from a css media request.
Html
<div class="row large-screen">
<div class="col-xs-6">
<div class="col-xs-12" style="height:200px; background-color:red;"></div>
<div class="col-xs-12" style="height:100px; background-color:blue;"></div>
</div>
<div class="col-xs-6">
<div class="col-xs-12" style="height:500px; background-color:green;"></div>
</div>
</div>
<div class="row mobile-screen">
<div class="col-xs-12" style="height:200px; background-color:red;"></div>
<div class="col-xs-12" style="height:500px; background-color:green;"></div>
<div class="col-xs-12" style="height:100px; background-color:blue;"></div>
</div>
CSS
@media screen and (max-width: 576px) {
.large-screen {
display: none;
}
}
@media screen and (min-width: 577px) {
.mobile-screen{
display:none;
}
}
https://jsfiddle.net/sfbtqt3j/
Hope it helps!
source to share