Html 引导-如何使单个div内容不响应？

我正在学习如何基于bootstrap构建网页，但在较小的屏幕上保持两个元素并排时遇到了一些困难
特别是，我有6个元素（A、B、C、D、E、F），我希望实现以下结果：

桌面屏幕：
A B
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>

A.
B
C
D
E
F

您只需指定每个断点处的列宽：

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

A.
B
C
D
E
F

要在代码中使用它，如下所示：

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

A.
B
C
D
E
F

具有引导功能的系统相当简单。。有4个默认屏幕大小。xs（小于768像素）、sm（768px及以上）、md（992px及以上）和lg（1200px及以上）。您可以为每个尺寸设置不同的宽度，它将相应地包裹。您可以为每个大小的屏幕应用col类，使其调整大小以适应需要。这方面的文档非常好。看

你的代码应该是这样的

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

A.
B
C
D
E
F

---

您还可以为每两行设置一个row类。

在问题中发布html。