Bootstrap列布局排序？

Question

我制作了一张图片，因为我觉得这最能说明我的问题

http://i.imgur.com/xYORDrx.png

我希望＆＃34;获取报价＆＃34;如果屏幕尺寸为if($worksheet.Cells.Item(1,3).text -eq ""){ $WorkBook.worksheets.Item("DeleteThisSheet").Delete() } 或md，则按钮会出现在第一列下方（如箭头所示），否则宽度为lg和xs时，布局需要是一个单列布局，带有两个文本块，然后是底部的引号按钮。

我可以将按钮放在第一列而不是它自己的列中，我得到了我想要的更大屏幕尺寸的布局，但显然当第二列包裹在按钮下方时中间。

Answer 1

我能想到的最快的捷径就是有两个版本的＆＃39;得到一个引用＆＃39;，一个在md或lg下可见，在第一个块下面，另一个只在xs或sm底部可见一切。

或者您可以使用脚本确定展示位置并相应地移动它。

Answer 2

我想出了另一个答案：

假设以下HTML：

<div class='col-md-6 col-sm-12'><h1>overview</h1></div>
<div id='life'  class='col-md-6 col-sm-12'><h1>why life insurance</h1></div>
<div id='quote' class='col-md-6 col-sm-12'><h1>get a quote</h1></div>

和以下CSS：

<style>
  #life{
    height: 400px;
    border: 1px solid black;
  } /* for visibility reasons */

  #quote{
    clear: both;
  }
</style>

在移动设备上，DIV将排在彼此之下，底部有“引用”。对于较大的屏幕，您可以添加以下CSS：

@media(min-width: 992px){
   #life{
     position: absolute;
     right: 0;
   }
}

'position：absolute'将使它在DOM中没有高度，因此将'get a quote'直接放在'overview'下面，'right：0'将div放在右边的屏幕。

看到这个jsFiddle（你需要一个强大的大屏幕，因为它在一个帧中运行HTML :)）