Html 学习引导：列堆叠，调整大小时需要新行堆叠

我正在学习Angular和Bootstrap，以便找到一份可能的工作，所以我正在制作一个简单的演示页面。调整大小时，在上一行的最后一个div之后堆叠新行时遇到问题。我有一个全尺寸的页面，看起来像这样：

Picture|Text|Btn|Btn <- Row 1
[  hidden div      ]
|   12 point col   | <- Row 2

我希望元素按如下方式堆叠：

Picture
Text
Btn
Btn
|12 pt col|

请参阅下面的代码。我肯定有些基本的东西我还不知道。我对柱子的类型不是太挑剔，我只是想让堆叠工作起来

<div class="container-fluid" id="mainFrame" ng-controller="mainController">
      <div class="row" id="row1">
        <div class="col-sm-2">
          <img src="img/blah.jpg">
        </div>
        <div class="col-sm-4" id="nameplate">
          <p>Lorem Ipsum</p>
          <p>sit amet dolor</p>
          </br>
          <p>Demo Page</p>
          <p>Frameworks: Angular and Bootstrap</p>
        </div>
        <div class="col-sm-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
        <div class="col-sm-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
      </div>

<!-----------------Top of hidden row-------------------------->
<div class="jumbotron container-fluid" ng-show="false"></div>

<!-----------------Top of row 3-------------------------->


<div class="col-sm-12"><p>Test</p><p>Blah</p><p>Blah</p></div>


</div>

---

感谢您的帮助！谢谢。

您需要为不同的屏幕大小添加不同的列规格。这就是反应行为的原因。您可以看到下面的工作代码片段--

安全登录：受保护页面
同侧眼睑

坐在阿梅特多洛

演示页面

框架：角度和引导

推我

推我

测试
废话
废话

请制作一把小提琴，这样我们可以更容易地编辑您的代码。我发现了什么是（js）小提琴，但我无法让它工作。我无法获得我需要的库（Angular、Bootstrap）来工作或复制问题。对不起，我帮不了什么忙。我是一个网络开发的初学者。我的世界是软件。你可以得到库，看看左边的菜单我认为我得到了库可以工作，但是JSFIDLE的行为不像我的浏览器一直在工作（或者根本没有调整大小）。恐怕我太没经验了，不能承担这个项目。回到软件上来。谢谢大家的帮助！

<div class="container-fluid" id="mainFrame" ng-controller="mainController">
      <div class="row" id="row1">
        <div class="col-sm-2">
          <img src="img/blah.jpg">
        </div>
        <div class="col-sm-4" id="nameplate">
          <p>Lorem Ipsum</p>
          <p>sit amet dolor</p>
          </br>
          <p>Demo Page</p>
          <p>Frameworks: Angular and Bootstrap</p>
        </div>
        <div class="col-sm-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
        <div class="col-sm-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
      </div>

<!-----------------Top of hidden row-------------------------->
<div class="jumbotron container-fluid" ng-show="false"></div>

<!-----------------Top of row 3-------------------------->


<div class="col-sm-12"><p>Test</p><p>Blah</p><p>Blah</p></div>


</div>

img
{
    height:30vh;
    padding:1vh 1vw;
    position:relative;
    top:8vh;

}


div
{
    border: 1px solid black;
}

.row div
{
    height:100%;

}

.row div div
{
    height:30px;
}

#nameplate
{
    vertical-align: bottom;
    margin: auto;
    text-align:center;

}

#nameplate p
{
    margin:2vh 2vw;

}

#mainFrame
{
    height: 100%;

}