Question

我有一个我自己开发的简单CSS网格，它提醒了Twitter引导程序。我有一个行元素和几个具有自己跨度大小类的col元素。

以下是我的代码的简单示例：

.row{
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

.row:after,
.row:before{
  content: " ";
  display: table;
}

.row:after{
  clear: both;
}

.col{
  display: inline;
  float: left;
  padding: 0 15px;
  position: relative;
  min-height: 1px;
}

.span-6{
  width: 50%;
}

@media screen and (max-width:780px){
  .span-md-12{
    width: 100%;
  }
}

<div class="row">
  <div class="col span-6 span-md-12">World</div>
  <div class="col span-6 span-md-12">Hello</div>
</div>

我希望Hello在我的示例中出现在World语句之前。当两列的宽度都是100％时，它需要工作，所以在col元素上浮动不会切割它。

换句话说，我想要一个我可以添加的CSS类，以便在HTML之后出现的列可以在第一列之前流动。知道如何实现这个目标吗？

编辑：我的解决方案是在媒体查询中添加flexbox支持。它似乎对手机有很好的支持。请参阅：http://caniuse.com/#feat=flexbox

如何在垂直移动设备上首先创建标记流中的列？

0 个答案: