html5 - bootstrap two col-sm but two row for xs -

html5 - bootstrap two col-sm but two row for xs -

i'm new in twitter bootstrap (v3). said in title, want design 2 columns, when screen sm , larger, want show 2 columns when it's smaller screen (xs), want show 2 rows instead. how can it?

sm , larger:

[---------][---------]

xs:

[---------]

[---------]

you can so:

<div class="row"> <div class="col-sm-6"> <p>hey, column 1</p> </div> <div class="col-sm-6"> <p>hiya, column 2</p> </div> </div>

the col-sm class mean columns in-line sm width , larger, when stepping under sm (xs) columns stack on top of each other.

hope helps!

html5 twitter-bootstrap css3