html - bootstrap responsive fluid layout -
i have started create website design bootstrap , need help. got 6 containers need arrange (and scale) different screen sizes cant work.
i want different designs screen (in pixels):
- 992px , beyond
- 768px 991px
- 480px-766px
- smaller 439px
i want arrange page components following image:
how can this? need create 4 different layouts , use hidden- classes determent layout show? seems lot of work when updating content. or can bootstrap black magic?
what bootstrap using? ill anyway. assuming 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>
Comments
Post a Comment