自定义位置列引导答案

【问题标题】：custom position column bootstrap自定义位置列引导
【发布时间】：2015-07-17 11:38:43
【问题描述】：

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

所以这个例子：

<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 出现在顶部。

对我有什么建议吗？

【问题讨论】：

标签： html css twitter-bootstrap col

【解决方案1】：

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

'隐藏'：

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

【讨论】：

感谢您的回复，我希望这种方式对我有用。 :)
没问题！很高兴听到它有帮助。请记住，我不确定这是否是“最佳实践”。只是对我有用并且没有引起问题的东西。

【解决方案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>

希望对你有帮助。

【讨论】：

感谢您的回复，之前我尝试将底部：0px 设置为 md-5。但这对我不起作用。置顶：md-5 为 20px 它对我有用。