ブートストラップグリッド列がスタックしない

Question

シンプルなブートストラップ要素でBigcartelストアを操作する。私は何回もBootstrapを使って作業しましたが、カラムはサイトの残りの部分で正しくスタックされていますが、この特定のページではスタックされていません。ここでは、コードがあります：画面サイズが小さくなるように

<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> 

、テキストが画像を重ね、代わりのブートストラップのデフォルトの動作である列を積み重ねています。これがなぜ機能していないのか分かりません。私の知る限りでは、行/列は正しくネストされています。

Answer 1

col-xs-*の列は重複しません。代わりにcol-sm-*を使用してください。

Codeply demo

注：ブートストラップ4col-xs-*だけcol-*に変更されました。