Bootstrap - 列排序/混合

Question

如何在bootstrap中做这样的事情？

从md size到xs size我想改变列的排序。如果需要，2行并不重要。

Answer 1

Col-sm-12确保div在小屏幕上为全宽。 xs: extra small, md: medium和lg: large。这个数字就像一个比例。最大宽度为12,6是宽度的一半，col：列明显。您可以使用两个rows这样做，但我个人更喜欢这种情况下的列，没有特殊原因。

例如，如果您希望div在小屏幕上占据div的1/3，那么您将使用col-sm-4，因为4 * 3 = 12。

Read the documentation here - Grid system

问题的解决方法在这里：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
   <div class="col-sm-12 col-lg-6 col-md-6">color red</div>
   <div class="col-sm-12 col-md-6 hidden-xs">color blue</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
   <div class="col-sm-12 col-md-6">yellow</div>
   <div class="col-sm-12 col-xs-12 col-md-6">orange</div>
   <div class="col-sm-12 col-md-6 visible-xs hidden-md hidden-sm hidden-lg">color blue</div>
 </div>