CODEWITHSUNDEEP
htmltwitter-bootstrap-3multiple-columns
surafel
surafel

Reputation: 153

How to switch place of two columns in bootstrap

i was trying to implement a three column website using bootstrap and there is 

[left-sidebar] [main-content] [right-sidebar]

when this layout is viewed in mobile view it becomes like this

[left-sidebar] 
[main-content] 
[right-sidebar]

so i want to switch the place of the [main-content] with the [left-sidebar] 

[main-content]
[left-sidebar]  
[right-sidebar]

here is the code i have used

<div class  = "row">
    <div class = "col-md-3">
        [left-sidebar]
    </div>
    <div class = "col-md-6">
        [main-content]
    </div>
    <div class = "col-md-3">
        [right-sidebar]
    </div>
</div>

Upvotes: 1

Views: 224

Answers (1)

Nicolas Heine
Nicolas Heine

Reputation: 94

Try this :

<div class="row">
    <div class="col-md-6 col-md-push-3">
        [main-sidebar]
    </div>
    <div class="col-md-3 col-md-pull-6">
        [left-content]
    </div>
    <div class="col-md-3">
        [right-sidebar]
    </div>
</div>

Upvotes: 3

Related Questions