Bootstrap columns one above the other

Question

I am using Bootstrap v3 to develop my interface.
I am using the 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 reduce the size (width) of the browser, the columns become smaller and smaller.
I want divs to be stacked on top of each other after a certain limit or minimum width, and not shrink.

Answer 1

Follow this link for exact column / grid sizes for xs and sm, http://getbootstrap.com/css/#grid-example-mixed You use a custom width function using

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

This gives a custom width based on the size of the device. Instead, for columns that need to be stacked by default, just use this

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

instead of xs (xtra small) and sm (small size), use the default average size, bootstrap will do the rest of your work. And one more thing, for your columns (4 and 8) there are also two different sizes, the presentation will be irregular. And one more 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, the "Class Prefix" is as follows:

.col-xs - Additional Small Devices - Phones (<768px)

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

.col-md - Medium Devices - Desktop Computers (≥992px)

.col-lg - Large Devices Desktop Computers (≥1200px)

In your coding (you ask for the desktop version, I think so ...) you need to remove class="col-sm-8 col-xs-8" and add class="col-md-8 col-lg-8"

the above code results are divided into each other, and not reduced as necessary.

Answer 3

Just remove the grid class "col-xs- *" that does not contain a stack.

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

Demo: http://bootply.com/92512