CODEWITHSUNDEEP
htmltwitter-bootstrapcss
hello world
hello world

Reputation: 1755

bootstrap grid for mobile layout

I have the following markup

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-sm-8">
      content
    </div>
    <div class="col-sm-4">
      sidebar
    </div>
  </div>
 </div>

How can i have the content section sit on top of the sidebar for mobile view? for example with the above markup ill get the following in mobile view (stack)

<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  siderbar
</div>

but i want to achieve the following for mobile view

<div class="col-sm-8>
  content
</div>
<div class="col-sm-8">
  content
</div>
<div class="col-sm-4">
  sidebar
</div>
<div class="col-sm-4">
  sidebar
</div>

I've seen this done before but just forgot. Thanks everyone

Upvotes: 0

Views: 121

Answers (2)

hello world
hello world

Reputation: 1755

After multiple attempts of just experimenting I found this way.

I decided to remove one whole row and squeeze all the contents in col-sm-8 and all the sidebar content in col-sm-4

<div class="col-sm-8">
 content
 content
</div>
<div class="col-sm-4">
 sidebar
 sidebar
</div>

Upvotes: 1

Pavlin
Pavlin

Reputation: 5528

The you are defining the behaviour for your columns to be the same for all displays. If you want them to appear differently, you've got to use them accordingly. The sm part of your css class name tells you how you want to render on that particular size of screen. So you use xs for very small screens, s for small screens, md for medium and so on.

Changing your markup to this should do the trick, I've always found best to play around with it a bit by changing your browser size or with some nifty browser addon. I changed your columns a bit, because it seems to me like you would want your content and sidebar to take the whole width of the screen on a mobile device.

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>    
  <div class="row">
    <div class="col-md-8 col-sm-12">
      content
    </div>
    <div class="col-md-4 col-sm-12">
      sidebar
    </div>
  </div>
 </div>

See this codepen snippet for reference: http://codepen.io/anon/pen/VLoMML

You can specify different layouts for each of the bootstrap supported different screen sizes, xs being good for mobile phones, x being good for tablets, md being good for regular sized computer screens and l for large displays. The documentation is really quite comprehensive: http://getbootstrap.com/css/#grid

Upvotes: 0

Related Questions