Cell reordering in Bootstrap

Question

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 would like to display it like this in mobile navigation:

[-nav/header]
[-----1-----]
[-----3-----]
[-----2-----]
[-----4-----]
[---footer--]

But that’s the only way I can do it:

[-nav/header]
[-----1-----]
[-----2-----]
[-----3-----]
[-----4-----]
[---footer--]

My code is 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>

Answer 1

For you to be able to reorder according to the resolution, you would have to change your Ivs to flex, so you can use "order". I made an example for you that when the resolution is less than 767px, it does what you want.

http://jsfiddle.net/vwxvw9xr/

I hope it helps you.