0

I'm using the Bootstrap the layout my website. If got 2 div's that are placed side by side, one left and one right, this looks likes this:

<section class="content">
    <div class="intro col-lg-3 col-md-4 col-sm-12 col-xs-12"></div>

    <div class="slider col-lg-9 col-md-8 col-sm-12 col-xs-12"></div>
</section>

This works fine. But when the screen reaches the "sm" and "xs" classes I'm trying to pull the slider div to the left and the intro div to the right so that the slider div displays above the intro div.

I found out that the pull classes in Bootstrap exists.

So I added "pull-right" to intro and "pull-left" to slider. This does exactly what I want, but it only does what I want as long the "lg" and "md" classes are triggered. As soon the div's are full width they are taken normal order.

Is there a way to make this also work in de "sm" and "xs" classes, or is there something I'm doing wrong? Thanks :)

ronnyrr
  • 1,481
  • 3
  • 26
  • 45

1 Answers1

1

Try push - pull classes. try the below code

<section class="content col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="intro col-lg-3 col-md-4 col-sm-4 col-sm-push-8 col-xs-4 col-xs-push-8"></div>

    <div class="slider col-lg-9 col-md-8 col-sm-8 col-sm-pull-4 col-xs-8 col-xs-pull-4"></div>
</section>
Debananda
  • 476
  • 1
  • 6
  • 17
  • Thanks for your input, but this in not doing what I want. First of all it also influenced the layout when the "lg" and "md" classes are triggered, what I found strange. Also on the smaller screen it isn't correct (see: http://oi39.tinypic.com/2vx4xup.jpg). The elements aren't full width anymore. – ronnyrr Nov 15 '13 at 10:07
  • can you share the entire section, so that we can get to know how the row class is getting formed coz i am seeing columns inside columns without getting wrapped with a row – Debananda Nov 15 '13 at 16:32