At the moment I have a layout that is like this, using Bootstrap:
[-nav/header]
[-1-][-2][-4]
[---3---][-4]
[---3---][-4]
[---footer--]
And I'd like to display it like this in mobile browsing:
[-nav/header]
[-----1-----]
[-----3-----]
[-----2-----]
[-----4-----]
[---footer--]
But I can only do this:
[-nav/header]
[-----1-----]
[-----2-----]
[-----3-----]
[-----4-----]
[---footer--]
My code looks something like:
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.red, .yellow, .green, .blue {
display: inline-block;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
}
* {
padding: 0 !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-8 col-md-8 col-sm-12 col xs-12">
<div class="col-lg-7 col-md-7 col-sm-7 col xs-12">
<div class="red">1</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col xs-12">
<div class="yellow">2</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col xs-12">
<div class="green">3</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="blue">4 - Sem nenhum problema</div>
</div>