Change bootstrap order on mobile - 3 different boxes - html

Question

I need to realize a pretty weird layout and i'm actually using bootstrap.
I have 3 boxes: A, B and C where A.height = B.height + C.height.
On mobile, they should render in the following order:
|B|
|A|
|C|
While on desktop i need the following layout:
|A||B|
| ||C|
(Basically A is the left column while B and C are on the right)
I can't figure out how C should be positioned.
Actually i have this code, it is perfect on mobile but on desktop produces the following layout:
|A||B|
| |
|C|
Code:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6">C</div>
</div>
Otherwise, putting B and C in the same box works great in desktop but produces
|B|
|C|
|A|
on mobile.
Do you have any suggestion?

Answer 1

Following structure will fix your problem:
<div class="container">
<div class="col-xs-12 col-md-6 pull-right">B</div>
<div class="col-xs-12 col-md-6">A</div>
<div class="col-xs-12 col-md-6 pull-right">C</div>
</div>
.box-B,
.box-C {
background: green;
height: 200px;
}
.box-A {
background: blue;
height: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-md-6 pull-right box-B">B</div>
<div class="col-xs-12 col-md-6 box-A">A</div>
<div class="col-xs-12 col-md-6 box-C pull-right">C</div>
</div>

Answer 2

Try the C like this:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 coll-md-offset-6">C</div>
</div>
OR:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
To change their view in phones or tablets you can use the implemented classes for it for example:
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
Like this in laptops, desktop you will see full width and in phone you will see both divs aligned in one row.
You can allso use col-xs-offset-* to move the div positions but you gotta make shure that you have space.
For Example:
--- THIS IS WRONG --- Because you have only 12 cols and you are setting 2 + 2 offsets so that means you need total of 16 cols.
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
--- THE RIGHT WAY ---
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
The classes in bootstrap are:
lg - desktop
md - laptop
sm - small devices (tablets)
xs - extra small devices (phones)
together with them you can use col-**-offset-** or col-**-hidden or col-**- visible
But once again if you are going to use offset make sure you are not going above 12 cols
Hope this will help you!

Answer 3

using rows and pull-right you can get the effect you're looking for:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">A</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
</div>
that should do the trick.