Stacking Bootstrap Columns over each other

Question

I am using Bootstrap v3 to develop my interface.
I use following snippet:

    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <h1>Hello...!</h1>
            <p>Para 1</p>
        </div>
        <div class="col-sm-8 col-xs-8">
            <h1>new div</h1>
            <p>Para 2</p>
        </div>
    </div>

However, when I decrease the size(width) of browser, the columns get smaller and smaller.
I want that, after a certain limit or min-width, the divs must stack over one another instead of getting smaller.

Answer 1

Follow this link for exact sizes of columns/grids for xs, and sm, http://getbootstrap.com/css/#grid-example-mixed You are using a custom width functionality by using

   <div class="col-sm-4 col-xs-4" >

This gives custom width based on the device size. Instead for the columns to get stacked over by default just use this

   <div class="col-md-4"> 

instead of xs(xtra small) and sm(small size), use medium size as default, bootstrap will do the rest of your work. And another thing, there is also two different size for your columns(4 and 8), the view would be irregular. And another thing, if you want to continue using custom sizes for columns instead of my method, remember this : xs-4 is different as sm-4

Answer 2

In bootstrap-3 "Class prefix" represents as follows:

.col-xs - Extra small devices - Phones (<768px)

.col-sm - Small devices - Tablets (≥768px)

.col-md - Medium devices - Desktops (≥992px)

.col-lg - Large devices Desktops (≥1200px)

In your coding (you are asking for desktop version i think so...) you have to remove class="col-sm-8 col-xs-8" and add class="col-md-8 col-lg-8"

the above code results, div over one another instead of getting smaller as you need.