Twitter bootstrap 如何使用Bootstrap 3实现这种桌面/移动布局？

我有一个我正在尝试实现的设计，我被困在如何用Bootstrap3正确地实现它上。我对Bootstrap不是很有经验，我确信我遗漏了一些东西，这些东西将使概念就位

在此配置中，桌面上可以看到三个具有背景图像的div：

但要在这种配置下在移动设备上看到：

---

我不知道如何做到这一点——我可以通过两个不同的3个div来实现，一个隐藏，一个显示在桌面/手机中，但这似乎并不正确。我可以通过添加我自己的

@media

规则来实现这一点，但这似乎也违背了Bootstrap的观点。

这非常简单，您可以使用Bootstrap中已有的网格系统来实现

.blue{
背景：蓝色；
}
格林先生{
背景：绿色；
}
瑞德先生{
背景：红色；
}
.世界500强{
宽度：500px；
保证金：0自动；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.世界500强{
宽度：250px；
}
}

250像素
250像素
500px，除非低于500px，否则其为250px

这非常简单，您可以使用bootstrap中已有的网格系统来完成

.blue{
背景：蓝色；
}
格林先生{
背景：绿色；
}
瑞德先生{
背景：红色；
}
.世界500强{
宽度：500px；
保证金：0自动；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.世界500强{
宽度：250px；
}
}

250像素
250像素
500px，除非低于500px，否则其为250px

试试这个

1
250
2
250
3
250

试试这个

1
250
2
250
3
250

对于这种情况，您可以指定每种情况下div的表示形式：

<div class="row">    
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       1 - 250
    </div>
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       2 - 250
    </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       3 - 500
    </div>
</div>

1 - 250
2 - 250
3 - 500

引导程序的系统很简单，请按照文档进行查询：

---

对于这种情况，您可以指定每种情况下div的表示形式：

<div class="row">    
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       1 - 250
    </div>
   <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       2 - 250
    </div>
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       3 - 500
    </div>
</div>

1 - 250
2 - 250
3 - 500

引导程序的系统很简单，请按照文档进行查询：

---

没有必要使用

col-xs-12 col-md-6 col-lg-6

或

col-xs-12 col-md-12 col-lg-12

没有必要使用

col-xs-12 col-md-6 col-lg-6

或

col-xs-12 col-md-12 col-lg-12

对不起，我应该更清楚一些。我需要他们是具体的宽度。你是说在容器上增加一个特定的宽度来达到这个目的？谢谢。所以在这种情况下，添加我自己的媒体规则是不可能的，因为我需要特定的宽度？这是有道理的，这是超越引导默认值的最小情况。谢谢。我想我在想Bootstrap应该为我做所有的事情，但那并没有真正的意义。对不起，我应该更清楚一些。我需要他们是具体的宽度。你是说在容器上增加一个特定的宽度来达到这个目的？谢谢。所以在这种情况下，添加我自己的媒体规则是不可能的，因为我需要特定的宽度？这是有道理的，这是超越引导默认值的最小情况。谢谢。我想我在想Bootstrap应该为我做所有的事情，但那并没有真正的意义。