0

I'm struggling to get my head around the Bootstrap pull and push methods. I've been playing around and i get a nice working example when switching just 2 divs. I understand that part.

But what i'm trying to achieve needs an extra element.

  <div class="row">
<div class="col-md-6 " style="background-color:grey;">TEXT</div>
<div class="col-md-6 col-md-push-12 " style="background-color:lavender;">IMAGE</div>
<div class="col-md-12 col-md-pull-12" style="background-color:lavenderblush;">FORM</div>
</div>

I know the example above is wrong, I've deliberately added my form div at 12 cols to push it below the image and text divs, what I want to achieve is:

desktop:

[ TEXT ] [ IMAGE ]

[........FORM........]

mobile:

[TEXT ]

[FORM ]

[IMAGE]

From what I can see i need to add something to my text div, I think?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
user2004211
  • 25
  • 8

1 Answers1

0

I think if the col-lg-6 then you can push the column by col-push-lg-6. you can't push the column by double Use the given example as reference that how it works.

If not enough than see the example given by DrGeneral from the given link:

http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap

<div class="row">

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

    <div class="col-sm-12 col-sm-push-12">
        Image
    </div>

    <div class="col-sm-12 col-sm-pull-12">
        Form
    </div>


</div>

Hope this link and examples works.....

Amit singh
  • 2,006
  • 1
  • 13
  • 19