stacking order in bootstrap

Question

I have a problem with the stacking order in bootstrap. I realise that similar questions have been asked, and that its push and pull that should be used. But i just can not get it to work.

this is the code im using:

<div class="row">
   <div class="col-xs-12 col-sm-6"> a </div>
   <div class="col-xs-12"> b </div>
   <div class="col-xs-12 col-sm-6"> c </div>
 </div>

What i want is for a, b and c to be under eachother in order in mobile view, but in desktop view a and c should be next to eachoter and b below them.

a
b
c

a c
b

I am not sure but i think that bootstraps grid system works with 12 culumns. with more columns the blocks jump in the next row, but this is a lucky effect. With pull and push it does not work (https://github.com/twbs/bootstrap/issues/10107) — schlagi123, Sep 22 '14 at 13:10

score 3 · Answer 1 · answered Sep 22 '14 at 13:16

3

It's not exactly the same thing but it's approaching...

Bootply : http://www.bootply.com/D5AmKsc6aT

HTML:

<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="row">
      <div class="col-xs-12">A</div>
      <div class="col-xs-12">B</div>    
    </div>  
  </div>
  <div class="col-xs-12 col-md-6">C</div>
</div>

answered Sep 22 '14 at 13:16

BENARD Patrick

30,363
16
99
105

Thank you, however in this example A and C do end up next to eachother, but then B doesnt go across the whole page in desktop. – Kalle Henningson Sep 23 '14 at 08:50

score 1 · Answer 2 · answered Sep 22 '14 at 13:35

There's not much html required, it's just a 2 column layout each column is 50%. You don't need nested columns. You don't need to specify -- in an un-nested structure the col-xs-12 -- the content 100% when it's below your column class min-width.

DEMO: http://jsbin.com/paqoke/2/edit

   <div class="row">

      <div class="col-sm-6">

         <p>A</p>

         <p>B</p>

      </div><!--/.col-*-6-->

      <div class="col-sm-6">
          C
      </div><!--/.col-*-6-->

   </div><!--/.row-->

</div><!--/.container-->

Thank you, however in this example A and C do end up next to eachother, but then B doesnt go across the whole page in desktop. — Kalle Henningson, Sep 23 '14 at 08:38

score 0 · Answer 3 · answered Sep 24 '14 at 19:32

Sadly, push/pull won't help you here, as you can't jump over a column. You'll have to duplicate some of your content (I've duped col-c in this example) and use bootstraps hidden-xs and visible-xs helper classes to show/hide on appropriate devices.

<div class="container">
  <div class="row">
    <div class="col-sm-6 bg-success"> a </div>
    <div class="hidden-xs col-sm-6 bg-info"> c desktop</div>
    <div class="col-xs-12 bg-warning"> b </div>
    <div class="visible-xs col-xs-12 bg-info"> c mobile</div>
  </div>
</div>

DEMO: http://www.bootply.com/SW2ygwLVNY

Also worth noting, you don't have to declare col-xs-12 if you've declared another grid-class, as it's the default xs width. (i.e. col-sm-6 defaults to col-xs-12 when on xs).

I was afraid that that was the case. Unfortunatly i cant use hidden and visible classes because my smooth scroll plugin gets confused then. I could maybe push different ids to the hidden divs with media query and jquery, or ill might just explain to the client that she just simply has to accept that the showreel will be at the bottom :) Thx for the feedback though! — Kalle Henningson, Sep 25 '14 at 00:14

stacking order in bootstrap

3 Answers3