Bootstrap - 如何使单个div内容无响应？

Question

我正在学习如何基于bootstrap构建网页,但是我在尝试将两个元素并排放在较小的屏幕上时遇到了一些麻烦.
特别是,我有6个元素(A,B,C,D,E,F),我希望得到以下结果:

桌面屏幕:
AB
CD
EF

手机屏幕:
A
B
CD
E
F.

我对A,B,E和F没有任何问题(我使用了类col-xs-*)但是我无法找到一种方法来保持C和D并排.

你能帮助我吗？:)

ps我的代码与此类似:

<div class="content">
    <div class="row">
         <div class="col-xs-2">a</div>
         <div class="col-xs-2">b</div>
    </div>
    <div class="row">
         <div>c</div>
         <div>d</div>
    </div>
    <div class="row">
         <div class="col-xs-2">e</div>
         <div class="col-xs-2">f</div>
    </div>
</div>

Answer 1

您只需在每个断点处指定列宽:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">A</div>
        <div class="col-xs-12 col-sm-6">B</div>
        <div class="col-xs-6">C</div>
        <div class="col-xs-6">D</div>
        <div class="col-xs-12 col-sm-6">E</div>
        <div class="col-xs-12 col-sm-6">F</div>
    </div>
</div>

要在代码中使用它,它是这样的:

<div class="content">
    <div class="row">
         <div class="col-xs-12 col-sm-6">a</div>
         <div class="col-xs-12 col-sm-6">b</div>
    </div>
    <div class="row">
         <div class="col-xs-6">c</div>
         <div class="col-xs-6">d</div>
    </div>
    <div class="row">
         <div class="col-xs-12 col-sm-6">e</div>
         <div class="col-xs-12 col-sm-6">f</div>
    </div>
</div>