Categories
css html responsive-design twitter-bootstrap

bootstrap responsive fluid layout

I have started to create a website design with bootstrap and need some help. I got 6 containers that I need to arrange (and scale) for different screen sizes but I cant get it to work.

I want different designs for screen with (in pixels):

  • 992px and beyond
  • 768px to 991px
  • 480px-766px
  • smaller up to 439px

I want to arrange my page components as the following image:
layouts for different screen sizes

How can I do this? Do I need to create 4 different layouts and use the hidden- classes to determent what layout to show? That seems like a lot of work when updating the content. Or can I do it with some bootstrap black magic?

What bootstrap are you using?
Ill help you anyway. Assuming your using 3.2.0…

http://www.bootply.com/krobF8P83o

<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div>
</div>
</div>
<div class="col-lg-6 col-md-4 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
</div>