css - 需要在 bootstrap 中重新对齐网格的两行内部列

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)以获得更好的可见/隐藏处理。