The responsive CSS that comes with B.S. defines what happens as the viewport gets smaller for you if you use their span structure. You may want to start with basic examples on your own. Create the appropriate HTML5 page, add a div for the class container, div for the class row, and then 2 divs.. span9 and span3. Then make the page smaller. Also, their examples show a few basic layouts. Just view the source of each, copy, paste, and make it your own..
http://twitter.github.io/bootstrap/getting-started.html#examples Also, on the scaffolding page, there is information on the responsive basics, as well as to easily hide / show on different sized screens.. http://twitter.github.io/bootstrap/scaffolding.html#responsive You can also add the base CSS media structure into your own CSS: /* normal size screen goes here 980-1199px */ /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } If you want your own styling to be 2 floating columns that go under each other on small screens, you can create: /* normal size screen goes here 980-1199px */ .col-one { width:600px;float:left;} .col-two { width:200px;float:left;} /* Landscape phones and down */ @media (max-width: 480px) { .col-one { width:100%;float:none;} .col-two { width:100%;float:none;} } If you are looking for specific information on what bootstrap is "doing" here, you will want to search for responsive design. Bootstrap is a framework that leverages / normalizes responsive design. Following their framework makes it easy to develop basic layouts. But learning about responsive design itself will help you be more creative as you create your design. I checked that site you mentioned. They do not seem to be using "bootstrap", but are certainly leveraging something to give them the responsive design you are seeing. You should be able to do the same type thing with B.S. with some creative thinking. Hope this helps. I know its kinda random info.. but its late and I am tired :) - J e f f C o n k l i n - - http://www.getoutsidenj.com - http://twitter.com/GetOutsideNJ - http://www.carabs.com On Wed, May 22, 2013 at 12:04 AM, <[email protected]> wrote: > Hi, > > I am just learning bootstrap ( from css media queries)and I cant find > tutorials which explain websites that resize and how do you get columns to > change on different viewports. > > The below is an example of what I want. > > http://www.opencolleges.ed**u.au/dista**nce-educat**ion<http://www.opencolleges.edu.au/distance-education> > > How do I get a column to go under another column on a smaller viewport > like mobile or hide a column or alter nav bar . > > The tutorials on bootstrapI have found talk about a fixed display and just > the basics . > > thanks > > -- > You received this message because you are subscribed to the Google Groups > "twitter-bootstrap" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > For more options, visit https://groups.google.com/groups/opt_out. > > > -- You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
