需要在引导程序中重新排列两行内部col-of grid

Question

我在contianer中有两行。 现在我试图在移动布局中将一个网格元素与另一个网格元素互换。 但我无法获得如何仅针对特定情况进行交换，因为两者都在两个不同的行类中。

对于桌面应用

对于目前的移动布局，它显示为

实际上我希望布局只重新调整第3个网格，如下图所示。

对于推荐，我附上相同的jsfiddle。 LINK

HTML代码：

<div class="container">
<div class="container">
<div id="graphArea" class=" row" >
   <div class="col-lg-4 col-md-4">
      <span class="label label-warning"><span class="badge">1:</span> First </span>
   </div>
   <div id="rightgrid" class="col-lg-6 col-md-6"> 
      <span class="label label-warning"><span class="badge">2:</span> Second </span>
   </div>
   <div id="extright"  class="col-lg-1 col-md-1">  
      <span class="label label-warning"><span class="badge">4:</span> Fourth </span>
   </div>
</div>
<div class="row borderbottom">
<div    id="inputDiv" class="col-md-6">
   <span class="label label-warning"><span class="badge">3:</span>&nbsp;Thrid</span>
</div>
<div>

CSS代码：

.borderbottom
{
 border: 2px solid #999;
 margin-top:5px;
 margin-bottom: 5px;
}

请让我知道当前的问题，或指导我如何做到这一点。谢谢

Answer 1

您可以复制这些部分并向其添加可见和隐藏的类

就像这个fiddle

一样

.hidden-xs, .visible-xs-inline-block

为了更好地使用，你可以使用nginclude（如果你使用angularjs）来避免重复的html并指定bootstrap grid-float-breakpoint（如果你使用boostrap sass）以获得更好的可见/隐藏处理。