响应div命令

Question

我是自助网格系统的新手，我想重新排序手机的<div>区域。

这是我对桌面视图的布局：

这就是我想要的手机：

我目前的HTML代码：

<div class="col-md-3">
  <div id="A">  A  </div>
  <div id="B">  B  </div>
</div>

<div class="col-md-9">
  C
</div>

目前，如果我在移动电话上查看该页面，则订单是A-> B-> C，因为A＆amp; B都在第一列内。但我不知道如何实现A-> C-> B顺序。那我该怎么做呢？

Answer 1

这可能不是最优雅的方式，但你可以在切换到移动设备时隐藏元素B，并通过使用bootstrap的“隐藏”来显示与dom中元素C相同内容的不同元素B. -xs“和”visible-xs“类。像这样......

<div class="row">
     <div class="col-md-3 col-xs-12">
       <div id="A">  A  </div>
       <div id="B" class="hidden-xs">  B  </div>
     </div>

     <div class="col-md-9 col-xs-12">
       C
     </div>
     <div id="B" class="col-xs-12 visible-xs">  B  </div>
</div>

我还建议您参考official bootstrap documentation了解更多信息

Answer 2

md中的col-md-9代表medum设备，这意味着屏幕上的所有设备最高可达992px。

Here您会找到一张包含col-xs，col-sm的表格。 col-md和col-lg结果。col-xs-12和xs结果。

您可以使用它们为元素定义<div class="col-xs-12 col-md-6">foo</div> 。这将告诉浏览器，在适用于xs定义的设备上，该列将占用所有12个网格部分。您可以应用多个规则，例如：

md

这意味着该元素在{{1}}上为12，在{{1}}设备上为6。