CODEWITHSUNDEEP
csstwitter-bootstrapjquery-mobile
Shantnu
Shantnu

Reputation: 137

How to change layout in Bootstrap grid while see in mobile?

i m making website using bootstrap and new to design,

i m using two column of size 6 in row in bootstrap

|| Col-1 || Col-1 || [Web View]

|||||||||||
|| Col-1 ||
|||||||||||
|| Col-2 ||
||||||||||| [Mobile View]

But i want in mobile to be 

|||||||||||
|| Col-2 ||
|||||||||||
|| Col-1 ||
||||||||||| [Mobile View][What i wanted]

Reference : http://www.pluralsight.com/

Upvotes: 0

Views: 52

Answers (2)

Glen Martin
Glen Martin

Reputation: 31

vanburenx is right just remember to code your HTML in the order you want it show on mobile. Then push/pull on larger layouts.

Upvotes: 0

vanburen
vanburen

Reputation: 21663

You can use Pull + Pull to do something like this.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container text-center">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="alert alert-info">2</div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      <div class="alert alert-danger">1</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions