自定义位置列 bootstrap

Question

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

所以这个例子：

<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

不确定这是否正确，但您可以使用 "hidden" 或 "visible" 类

'hidden':

<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>

或'visible':

<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 中隐藏和可见类的 link： Bootstrap responsive utilities

Answer 2

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

<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>

希望对您有所帮助。

自定义位置列 bootstrap

custom position column bootstrap

html

css

col

twitter-bootstrap