1

I've encountered a problem with bootstrap related with the stacking order. Searched and saw many examples online, but it just won't work after convert it to my own code.

Here is my code:

<div class="container" style="border:1px solid red; ">
    <div class="row row-fluid">
       <div rel="1" style="border:1px solid black;" class="col-md-8 col-md-push-4">1</div>
       <div rel="2" style="border:1px solid black;" class="col-md-4 col-md-pull-8">2</div>
    </div>
</div>

What I want to do is to show it like this:

When at normal size, show:

|1 : 2|

When at small size, show:

2 |

1 |

I've checked some others's solution by adding pull and push, but it shows up like 2 | 1 by default without screen size changes. Where and what did I do wrong?

Zanon
  • 29,231
  • 20
  • 113
  • 126
will.i.am
  • 2,002
  • 3
  • 20
  • 22

1 Answers1

0

Always remember that the basic structure of bootstrap is 

<div class="container">
      <div class="row">
        <div class="col-md-6">Hi i am a coloumb</div>
        <div class="col-md-6">Hi i am a coloumb</div> 
   </div>
 </div>

You forgot the add the col-md , first , comes the "container" , Than the "Row" , than the "col-md" , inside the col-md put in the stuff you wanna fit in and in this case the page is divided into 2 equal coloumbs col-md-6 on each side[Out of a total of 12 ] , now at normal screen size you'll see both col-md's horizontal to each other , whereas when you make ur screen smaller , u'll see the same col-md's stacked vertically one after another .

check out the fiddle Jsfiddle

Thats the magic of bootstrap , ur not programming anything to be responsive , ur just enclosing "everything u want to be responsive" in a "col-md" . and Voila ! everythings responsive .

I had given a similar answer to a different question on stack exchange . It might be helpful if you refer to it . below is the link

Question

Cheers.

Gautam.

Community
  • 1
  • 1
gautamz07
  • 385
  • 2
  • 11