Css 将一个div放置在其他div旁边

这可能是一个愚蠢的问题，但我对Bootstrap非常陌生，不知道哪种方法可以解决以下问题：

我有5个div，一个是黄色的，另一个是粉红色的。还有一个

行，该行在div no:5之后开始。

我想做的是将黄色div与下图中的粉红色div放在一起： 我尝试在第一行中添加长度为

col-md-10

的黄色div，但它看起来不像我想要的

感谢您的帮助。

---

请记住，一切都需要响应。

您需要将所有lef div包装在一个.col-md-2容器中，黄色部分按原样包装，例如

     <div class="col-md-2 box col-xs-3 col-sm-2">
       <div class="pink">div 1</div>
       <div class="pink">div 2</div>
       <div class="pink">div 3</div>
       <div class="pink">div 4</div>
       <div class="pink">div 5</div>
     </div>
     <div class="col-md-10 box col-xs-9 col-sm-10">
       <div class="yellow">yellow part</div>

     </div>

第一组
第2组
第3组
第4组
第5组
黄色部分

您的使用或行导致了此问题。将您的

框

合并到一列：

1.
2.
3.
4.
黄色的？

最好的选择是使用“XS”度量，因为bootstrap首先用于mobile，因此第一个要考虑的度量是“XS”度量，其余的取决于此。我的意思是，如果你只输入col-xs-12，那么响应的结果与输入“col-xs-12 col-sm-12 col-md-12，col-lg-12”的结果相同

因此，如果您希望在较大尺寸和较小尺寸中具有相同的视图，您可以这样使用：

    <div class="container">
  <div class="row">

    <div class="col-xs-2 text-center">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-xs-10 yellow">  YeLLoW ? </div>    
  </div>
  <hr>

</div>

1.
2.
3.
4.
黄色的？

像这样吗@error404感谢您的重播，这是更好的解决方案。但是，当我重新调整窗口大小时，所有的粉红色分区都被黄色分区覆盖。你知道如何解决这个问题吗？检查黄色列上的列sm等值。我已经更新了我的答案。非常感谢！我的声誉不允许我投票支持你的答案：（谢谢你的重播，但是当我重新调整窗口大小时，所有粉红色的div都消失了。你知道如何解决这个问题吗？谢谢。你的类正在处理调整大小的布局，没有任何东西真的消失。你尝试过bootly还是在你制作的普通页面上？因为bootly说“引导编辑器的使用需要更大的屏幕分辨率…”。

    <div class="container">
  <div class="row">

    <div class="col-xs-2 text-center">
        <div class="box text-center">1</div>
        <div class="box text-center">2</div>
        <div class="box text-center">3</div>
        <div class="box text-center">4</div>
    </div>  
    <div class="col-xs-10 yellow">  YeLLoW ? </div>    
  </div>
  <hr>

</div>