Twitter bootstrap 3 Bootstrap连续3个响应列-如何？

所以我有一排，里面有2到3个不同的列。我希望它像在这个网站上： 特写。有3个带文本的图像，当我最小化浏览器时，它们将在每个图像下对齐，而不是在每个图像之外对齐

那我该怎么做呢

我试过这样做，但当我最小化浏览器时，这不会起作用，因为这些东西会重叠，因为它们在一行中

<div class="container dates-sub">
    <div class="row">
        <div class="col-md-4">
            <span class="day-sub">28</span>
            <span class="month-sub">09</span>
            <span class="year-sub">2015</span>
        </div>
        <div class="col-md-offset-2 col-md-4">
            <span class="day-sub">30</span>
            <span class="month-sub">10</span>
            <span class="year-sub">2015</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">NASA-ESA Space Festival San Francisco</h3>
                <p class="blog-dates">28.09.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="blog-title">
                <h3 class="blog-heading">Benefit-Gala</h3>
                <p class="blog-dates">30.10.2015, 19:00, Hohenzollernring 56,<br>50672 Köln, Germany <i class="fa fa-map-marker"></i></p>
            </div>
            <div class="blog-sub">
                <p>Dolore magna aliquyam erat, sed diam vol paxo
                    eos et accusam et justo duo dolores et ea ruits-
                    clita kasd gubergren.

                    At vero eos et accusam et justo duo dolores et
                    ea clita kasd gubergren, no sea takimata sanda-
                    ipsum dolor sit amet. Dolore magna aliquyam e-
                    rat, sed diam vol paxo eos et accusam et justo
                    duo dolores et ea. At vero eos et accusam et ju-
                    sto duo dolores etea clita kasd gubergren, no s-
                    ea takimata sandaipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

28
09
2015
30
10
2015
NASA ESA空间节旧金山
2015年9月28日19:00，德国科伦郡霍亨佐勒宁56号
50672
多洛雷·马格纳·阿利奎亚姆·埃拉特，塞德·迪亚姆·沃勒·帕克索
eos和accusam和justo duo dolores和ea ruits-
克里塔·卡斯德·古伯格伦。
在vero eos和accusam和justo duo dolores和
埃克莱塔·卡斯德·古伯格伦，无海塔基马塔散打-
ipsum dolor sit amet。多洛雷大酒店-
大鼠，按直径、体积、重量和重量
多洛雷斯和埃厄

义演
2015年10月30日19:00，德国科伦郡霍亨佐勒宁56号
50672
多洛雷·马格纳·阿利奎亚姆·埃拉特，塞德·迪亚姆·沃勒·帕克索
eos和accusam和justo duo dolores和ea ruits-
克里塔·卡斯德·古伯格伦。
在vero eos和accusam和justo duo dolores和
埃克莱塔·卡斯德·古伯格伦，无海塔基马塔散打-
ipsum dolor sit amet。多洛雷大酒店-
大鼠，按直径、体积、重量和重量
多洛雷斯和埃厄。在vero eos和accusam和ju-
斯托·多洛雷斯·埃塔·克莱塔·卡斯德·古伯格伦，无s-
这是我最喜欢的地方

请阅读引导文档

在这种情况下，若要强制元素看起来和大屏幕上的元素一样，就必须将它们添加到其他类似的响应类中

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>

.my-class{
 .make-lg-column(6);
 .make-md-column(6);
 .make-sm-column(6);
 .make-xs-column(6);
}

<div class="my-class">Hello</div>

你好 或者，如果你使用较少，你可以这样做

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Hello</div>

.my-class{
 .make-lg-column(6);
 .make-md-column(6);
 .make-sm-column(6);
 .make-xs-column(6);
}

<div class="my-class">Hello</div>

。我的班级{
.制作lg柱（6）；
.制作md列（6）；
.制作sm栏（6）；
.制作xs列（6）；
}
你好

当前，您正在使用以下布局：

• 第一行（

  .col-md-4

  +

  .col-md-offet-2.col-md-4

  ）
• 第二行（

  .col-md-6

  +

  .col-md-6

  ）

您需要了解有关引导的几件事：

• md

  表示“中等”（即大于992px且小于1200px的设备）
• Bootstrap是先移动，这意味着它将尝试先渲染extra-s商场布局，然后是small，然后是medium，然后是large
• 在不使用任何列类的情况下，引导将使用12列类

这意味着您没有为extra-small和small设备设置任何列类。在本例中，引导将它们呈现为12列元素，这解释了它们占用整行

要使布局在每个设备上工作，您需要使用尽可能最小的列类，

。col xs xx

：

28
09
2015
30
10
2015
NASA ESA空间节旧金山
2015年9月28日19:00，德国科伦郡霍亨佐勒宁56号
50672
多洛雷·马格纳·阿利奎亚姆·埃拉特，塞德·迪亚姆·沃勒·帕克索
eos和accusam和justo duo dolores和ea ruits-
克里塔·卡斯德·古伯格伦。
在vero eos和accusam和justo duo dolores和
埃克莱塔·卡斯德·古伯格伦，无海塔基马塔散打-
ipsum dolor sit amet。多洛雷大酒店-
大鼠，按直径、体积、重量和重量
多洛雷斯和埃厄

义演
2015年10月30日19:00，德国科伦郡霍亨佐勒宁56号
50672
多洛雷·马格纳·阿利奎亚姆·埃拉特，塞德·迪亚姆·沃勒·帕克索
eos和accusam和justo duo dolores和ea ruits-
克里塔·卡斯德·古伯格伦。
在vero eos和accusam和justo duo dolores和
埃克莱塔·卡斯德·古伯格伦，无海塔基马塔散打-
ipsum dolor sit amet。多洛雷大酒店-
大鼠，按直径、体积、重量和重量
多洛雷斯和埃厄。在vero eos和accusam和ju-
斯托·多洛雷斯·埃塔·克莱塔·卡斯德·古伯格伦，无s-
这是我最喜欢的地方

我看不出您试图将图像放在何处，但只要您将它们放在这样的“缩略图”类中，

它们就不应该重叠

然后应用

col-xs-6 col-md-12和
将标题的上/下方向更改为左/右

请看一个例子：
您的第一个例子是非常多余的；看@cvrebert这就是为什么你给我投了反对票？我不知道什么时候使用更好的解决方案？你的例子中没有图像。是的，这是自定义css做的位置改变：堆叠的图像和文本旁边