html - 自定义位置列引导

Question

在移动设备上显示时，我遇到了列引导问题，

所以这个例子：

<div class="row">
   <div class="col-md-5"> </div> 
   <div class="col-md-7"> </div>
</div>

在手机上显示时，col-md-5 会出现在顶部，col-md-7 会出现在底部。

但我想，col-md-5 出现在下面，而 col-md-7 出现在顶部。

对我有什么建议吗？

Answer 1

有两个选项要么放在col-md-7html 中，如：

<div class="row">
   <div class="col-md-7"> </div>
   <div class="col-md-5"> </div> 
</div>

或者对移动设备使用绝对位置，例如：

.row {
    position: relative;
}
.col-md-5 {
    position: absolute;
    top: 20px;
}
.col-md-7 {
    position: absolute;
    top: 0;
}

<div class="row">
   <div class="col-md-5">col 5 </div> 
   <div class="col-md-7">col 7 </div>
</div>

希望能帮助到你。

Answer 2

不确定这是否是正确的做法，但您可以使用“隐藏”或“可见”类

'隐'：

<div class="row">
   <div class="col-md-5 hidden-xs hidden-sm">content abc </div> 
   <div class="col-md-7"> </div>
   <div class="col-md-5 hidden-md hidden-lg">content abc </div>
</div>

或“可见”：

<div class="row">
   <div class="col-md-5 visible-md visible-lg">content abc </div> 
   <div class="col-md-7"> </div>
   <div class="col-md-5 visible-xs visible-sm">content abc </div>
</div>

这是引导程序中隐藏和可见类的链接： Bootstrap responsive utility