Bootstrap Grid arrangement on responsive view - css

Question

Is it possible to do this?
I have 3 columns in a row. The first column has 2 nested row - top and bottom.
Is it possible to have the bottom row of the first column to be at the fourth position is the mobile view?
Here is my code:
http://www.bootply.com/yhhFaWRjC6
Edit:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row" style="height:100%;">
<div class="col-md-4 col-lg-4 col-sm-12" style="background-color:#ccc;height:100%; padding:0px;">
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#d33;">one</div>
</div>
<div class="row">
<div class="col-md-12 " style="height:180px;background-color:#edd;">four</div>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#e42;">two</div>
<div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#444;color:#fff;">three</div>
</div>
</div>
I want to make it the sequence to be:
- one
- two
- three
- four
In mobile

Answer 1

Assuming the first column to be less in height than both the second and third column I'm afraid you can only achieve this by:
Duplicating the content of the fourth column and showing/hiding it based on the grid size (e.g. xs). I'll show an example of this below.
Using JavaScript to move the content of the fourth column when the grid size changes. I have a small prototype of a jQuery plugin to facilitate this at https://github.com/ckuijjer/jquery-breakpointspy
Create your own grid system using flexbox. This might be an option if you don't have to support IE9 or lower.
I've implemented the first option below, and made some additional changes:
I've moved the inline styling into classes named .one, .two, .three and .four to make the code a little bit more clean.
I've started with the mobile layout and gave all classes col-xs-12. This makes a column take up 12 columns from the size xs onwards.
<div class="container">
<div class="row">
<div class="col-xs-12 one">one</div>
...
<div class="col-xs-12 four">four</div>
</div>
</div>
As we want to have each column take up a fourth of the container, I've added col-md-4 to each of the columns. Each column now looks like e.g. <div class="col-xs-12 col-md-4 one">. There is no need to add col-lg-4 nor col-sm-12.
Showing a column only on a specific grid size can be done by e.g. visible-xs-block. As we want the fourth column to only be visible on xs and sm I've changed the html into <div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>. Notice that I've dropped the col-md-4 as there is no need for that anymore.
To put the fourth column below the first column when the screen is md or lg the first column is changed into a nested grid. I've opted not to use a second .row as having more than 12 columns will make the next column drop anyway and used .col-xs-12 as I always want a column to have a bootstrap grid class on it, regardless of the screen size. I could've used visible-md-block and visible-lg-block to make it show on md and lg only, but for fun I've used its opposite, hidden-xs and hidden-sm.
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
See the entire code below:
.one {
height: 180px;
background-color: #d33;
}
.two {
height: 360px;
background-color: #e42;
}
.three {
height: 360px;
background-color: #444;
color: #fff;
}
.four {
height: 180px;
background-color: #edd;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-12 one">one</div>
<div class="col-xs-12 hidden-xs hidden-sm four">four</div>
</div>
</div>
<div class="col-xs-12 col-md-4 two">two</div>
<div class="col-xs-12 col-md-4 three">three</div>
<div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>
</div>
</div>