Ef Ge Ef Ge - 2 months ago 8x
HTML Question

3 Elements, the both right should move to top and buttom in twitter-bootstrap

I want to build a test website. It contains 3 divs.
One div should be on the left side and the other divs on the right side. If i resize the browser, the highest of the right divs should move to the top and the lowest should move to the bottom.

This is how it should look in large browsers:

<div class="col-lg-6 highlight" style="height:50%;">1</div>
<div class="col-lg-6 highlight" style="height:25%;">2</div>
<div class="col-lg-6 highlight" style="height:25%;">3</div>

enter image description here
But if I resize the browser, the order is 1 - 2 - 3. I want 2 - 1 - 3.

This is how it should look like. That code works in mobile:

<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">2</div>
<div class="col-lg-6 highlight col-lg-pull-6" style="height:50%;">1</div>
<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">3</div>

enter image description here

But if I resize the browser window to large, it occurs a gap.

enter image description here

It works if I float the 1 to the left and the others to right and remove the css properties in large browsers. But is it possible with pure bootstrap?


You can use pull-right and pull-left classes for float left or right,like this.

<!DOCTYPE html>

   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   @media(max-width: 991px){
			float: none!important;

<div class="row" style="height:500px;">
  <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">2</div>
  <div class="col-md-6 pull-left" style="height:50%;background:#080;color:#fff;text-align:center;">1</div>
  <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">3</div>