CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3733831
user3733831

Reputation: 2926

Change columns order in bootstrap

I am trying to change columns order of my page layout. Here I use bootstrap and tried with .col-sm-push-* and .col-sm-pull-* modifier classes. But I can't get it to work.

My HTML is something like this -

<section class="sidebar">
    .....
    .....
    .....
</section> <!-- /.sidebar -->

<section class="content">
    .....
    .....
    .....
</section> <!-- /.content -->


<section class="request">
    .....
    .....
    .....
</section> <!-- /.request -->

There are 3 columns and now I need to display them differently according to the screen sizes.

In small and higher screen size, I need to display them in a single row. like this, 

[sidebar] [content] [request]

In extra small size, I need to change its order, like this 

[content]
[request]
[sidebar]

This is how I tried it in my Less file. but its not working for me. 

.sidebar {
    .make-sm-column(3);
    .make-sm-column-pull(3)

    .....
}   

.content {
    .make-sm-column(5);
    .make-sm-column-push(5)

    .....
}   

.request {
    .make-sm-column(4);
    .make-sm-column-pull(4)

    .....
}

Hope someone may help me regarding this. Thank you.

Upvotes: 0

Views: 613

Answers (3)

Rakhat
Rakhat

Reputation: 4942

For column resets use a combination of a .clearfix and responsive utility class .visible-xs-block

<div class="container">
    <div class="row">
        <section class="col-xs-4 col-sm-push-4">Content</section>
        <div class="clearfix visible-xs-block"></div>
        <section class="col-xs-4 col-sm-push-4">Request</section>
        <div class="clearfix visible-xs-block"></div>
        <section class="col-xs-4 col-sm-pull-8">Sidebar</section>
    </div>
</div>

Example in Codepen

Upvotes: -1

Sebsemillia
Sebsemillia

Reputation: 9476

Bootstrap 3 is a mobile first framework. Therefore you should change your HTML structure to your desired mobile structure first. Like this for example:

<section class="content">
    .....
</section> <!-- /.content -->

<section class="request">
    .....
</section> <!-- /.request -->

<section class="sidebar">
    .....
</section> <!-- /.sidebar -->

Next you should add the pull and push assignments, like you already tried to do. But you got the logic wrong, you need to pull / push the elements according to the other elements that should be "jumped".

I don't know about the LESS syntax, but with CSS classes you markup would look like this:

<div class="row">
<section class="content col-md-5 col-sm-push-4">
    Content
</section> <!-- /.content -->

<section class="request col-md-4 col-sm-push-3">
    Requests
</section> <!-- /.request -->

<section class="sidebar col-md-3 col-sm-pull-9">
    Sidebar
</section> <!-- /.sidebar -->
</div>

Maybe in LESS it would be like this:

.sidebar {
    .make-sm-column(3);
    .make-sm-column-pull(9)

.....
}   

.content {
    .make-sm-column(5);
    .make-sm-column-push(4)

    .....
}   

.request {
    .make-sm-column(4);
    .make-sm-column-push(3)

    .....
}

But remember to change your HTML structure first!

Working Example

Upvotes: 2

Tarjo
Tarjo

Reputation: 579

Mybe you can try this:

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
    <section class="sidebar col-xs-6 col-md-4">Sidebar</section>

    <section class="content col-xs-6 col-md-4">Content</section>

    <section class="request col-xs-6 col-md-4">request</section>
</div>

you can find more here : Bootstrap 3

Hope that helps.

Upvotes: 0

Related Questions