How to get bootstrap columns to stack responsively?

Question

I'm trying to make my content page that normally is split into two col-xs-6 columns to vertically stack on top of each other for smaller screens/mobile. When I try minimize the screen, the columns just mash together instead of stacking. I feel like I'm missing something important because I thought bootstrap columns were automatically responsive like the ones on this site:

https://getbootstrap.com/examples/grid/

my html code:

<div class="container-fluid">

  <div class="row">
    <div class="col-xs-12 aboutbg">About Us
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 aboutrow text">
      <h2>Home Roots</h2>
      <p> Founded right here in Ontario</p>
    </div>
    <div class="col-xs-6 aboutrow pic">
      <h3>insert pic</h3>
    </div>

    <div class="col-xs-6 aboutrow pic">
      <h2>insert pic</h2>
    </div>
    <div class="col-xs-6 aboutrow text">
      <h2>Our Values</h2>
      <p>Good food makes good people</p>
    </div>

    <div class="col-xs-6 aboutrow text">
      <h2>Our Promise to You</h2>
      <p>The freshest and the bestest of foods</p>
    </div>
    <div class="col-xs-6 aboutrow pic">
      <h3> Insert pic</h3>
    </div>
  </div>

I've tried littering the page with div rows, but that doesn't change the layout too. I've got the standard bootstrap cdn and jquery in the base template too. What is it I'm missing to make the columns stack vertically?

Answer 1

make Separate columns stack nicely

I have used javascript libraries like : https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows, to make all columns (on the same row) have equal height. This way bootstrap can handle it nicely and stack them nicely.

make columns stack only on mobile or small

Or what you mean is: you want them to stack in mobile, but in desktop to be two separate columns?

what xs-col-6 means is: for xs devices (or bigger) split up in 2 columns (12 /6 = 2)

use: xs-col-12 sm-col-6

explanation

this means for xs or bigger devices use 1 column, for sm devices or bigger use 2 columns.

remember bootstrap defined these steps (xs, sm, md, lg). they are bound too a certain pixel width. so, no guaranty it will actually show mobile layout when you use mobile phone (phones are mostly xs, sm).

alternatives

you can hide blocks all together for certain screen-widths by using classes like .hidden-lg

reference: http://getbootstrap.com/css/#responsive-utilities

easy tooling

here use: http://shoelace.io/ to make your grid respond the way you want. It generates html code for you. simply copy paste the classes in your divs and you have the responsiveness you want.