Css Twitter引导网格：为手机设置不同的大小

我正在尝试做一个引导网格布局。我想做的是在一行中，在同一个div中有一个较大的列（列大小8）和一个较小的列（列大小4）。我能够相当容易地完成这一点。我现在遇到的问题是，当浏览器调整大小时，col大小4会降到较大的col大小8以下，但尽管我的代码如此，当我在代码中指定要在小型移动设备上使用col-xs-12时，仍然会继承col大小4。你知道为什么它在包裹下面时，屏幕宽度为480px时，保持4号列吗？应该是12点。因此，我要迅速重申：

我希望该行包含一个8列和一个4列，我已经完成了

当窗口的大小调整为移动（480px）时，我希望大小为4的列环绕在8列的下面，并变为大小为12，以适应整个屏幕。这是我的密码：

<div class="container">



  <div class="row">


      <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
      <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>




  </div><!-- END CONTACT ROW -->

</div><!-- END CONTAINER -->

大柱
小柱

以下是关于手机的问题：

---

您需要为每个div设置一行

：

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
    </div><!-- END CONTACT ROW -->
  <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">smaller column</div>
    </div><!-- END CONTACT ROW -->
</div><!-- END CONTAINER -->


大柱
小柱

一个
行
的最大值必须是12列，这意味着你可以在6列和6列各跳一次。但你不能有12列和12列。
好的，我已经搞定了

<div class="container">




  <div class="row">
   <div class="col-lg-8 col-md-8 contact-area">larger column</div>
   <div class="col-lg-4 col-md-4 social-area">smaller column</div>
  </div><!-- END CONTACT ROW -->





</div><!-- END CONTAINER -->


大柱
小柱

因此，通过这种方式，它们在大屏幕和中屏幕上彼此靠近，并且没有任何类型的sm或xs类，它们只在这些断点处执行100%的宽度。现在工作正常。
发生这种情况的原因是在原始代码中

  <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
  <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>

较大的列
小柱

您指定了超小屏幕和更大屏幕上的每一列应为全尺寸12。这导致它们堆叠，因为两列不能为全宽

当您删除“col-xs-12”时，您的代码指定在小屏幕及以上的屏幕上，您希望一列的宽度为3/4，另一列的宽度为1/4，大小分别为8和4。在比小屏幕小的屏幕上，您希望列堆叠

实际上，您不需要为lg屏幕指定任何内容，因为您指定的是相同的尺寸。
下面的一个将解决此问题。屏幕尺寸小于或等于3/4和1/4的列大小。小于小屏幕的屏幕将具有100%的宽度并垂直堆叠

<div class="row">
   <div class="col-sm-8 contact-area">larger column</div>
   <div class="col-sm-4 social-area">smaller column</div>
 </div>


大柱
小柱
但这似乎将两个div放在了不同的区域，一个在另一个之上。它们一直在堆叠。我希望在大屏幕和中型屏幕上，div坐在同一行，彼此紧挨着，然后在mobile或xs类上堆叠。