css - Bootstrap grid columns not stacking

Question

Working on a Bigcartel store with some simple Bootstrap elements. I've worked with Bootstrap many times, and the columns are stacking correctly on the rest of the site, but not on this particular page. Here's the code:

<div class="container-fluid team" id="merchpreview" style="background-color: #3ED500">
  <div class="row">
    <div class="col-xs-12 text-center">
      <h1 style="Font-family: Nunito; color: #F1F2F2;"><b><u>MERCH INFO</b></u></h1>
    </div>
  </div>
     <div class="row">
       <div class="col-xs-3">
              <a href="{{ product.image | product_image_url }}" >
                {% if product.on_sale %}<div id="sale"><span class="onsale">On Sale</span></div>{% endif %}
                  {% case product.status %}{% when 'sold-out' %}<div id="sold"><span class="soldout">Sold Out</span></div>{% endcase %}
              <img src="{{ product.image | product_image_url }}" alt="Image of {{ product.name | escape }}" style="margin-bottom: 5em;" />
               </a>

    </div>


    <div class="col-xs-7" style="color: #F1F2F2;">
    <div id="product-details" class="span5">
        <h3 class="name" style=" font-family: 'Muli', sans-serif;"><span>{{ product.name }}</span></h3>
          <h3 class="price" style=" font-family: 'Muli', sans-serif;">{% if product.max_price != product.default_price %}<del>{{ product.max_price | money_with_sign }}</del>{% endif %}<span>{{ product.price | money_with_sign }}</span></h3>
          <h3 style=" font-family: 'Muli', sans-serif;"><b>Product features:</b></h3>
          <ul>
            {{ product.description }}
          </ul>
        </div>

So as the screen size gets smaller, the text is overlapping the image, instead of stacking the columns which is Bootstrap's default behavior. Not sure why this isn't working. To my knowledge, the row/col are nested correctly.

Answer 1

The col-xs-* columns don't stack. Use col-sm-* instead.

Codeply demo

Note: Bootstrap 4 col-xs-* has been changed to just col-*.