CODEWITHSUNDEEP
csstwitter-bootstrappull
ronnyrr
ronnyrr

Reputation: 1571

Bootstrap order of elements using pull

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 :)

Upvotes: 0

Views: 693

Answers (1)

Debananda
Debananda

Reputation: 486

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>

Upvotes: 1

Related Questions