Question

我正在尝试让我的布局在行之间移动项目，而网格系统正在努力实现这一目标！

在中等以上我希望它看起来像这样

+---+-------+
| A |   B   |
|   |-------+
|   | C | D |
+---+---+---+

然后以较小的分辨率我希望它像这样

+-------+
|   C   |
+-------+
|   B   |
+-------+
| A | D |
+---+---+

我一直在尝试使用一些嵌套的行，但我们仍然坚持根据不同的大小（sm，md等）移动它们的概念。

Answer 1

您还可以使用隐藏和可见类。在getbootstrap.com上查看.visible and .hidden

因此，您可以想象在HTML文件中根据需要整理内容，如下所示：

＆＃13;

.cola { background:red; height:100px;}
.colb { background:grey; height:100px;}
.colc { background:green; height:100px;}
.cold { background:yellow; height:100px;}

＆＃13;

<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

    <div class="container">
        <div class="row visible-md visible-lg"> <!-- visible only on medium and large devices -->
          
          <div class="col-md-6 cola">col A</div>
          <div class="col-md-6 row">
            <div class="col-md-12 colb">col B</div>
            <div class="col-md-6 colc">col C</div>
            <div class="col-md-6 cold">col D</div>
          </div>
                        
        </div><!-- end row -->
      
      <div class="row visible-xs visible-sm"> <!-- visible only on small and extra-small devices -->
          
          <div class="col-xs-12 colc">col C</div>
          <div class="col-xs-12 colb">col B</div>
          <div class="col-xs-6 cola">col A</div>
          <div class="col-xs-6 cold">col D</div>
                        
        </div><!-- end row -->
      
     </div><!-- end container -->
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
      
</body>

＆＃13;

Bootstrap 3在网格中的行之间移动项目

1 个答案: