如何使用Bootstrap 3更改元素的显示顺序

Question

可以有人帮助我我想我怎么能用bootstrap做到这一点,谁都有线索？我不知道你怎么能改变元素的显示顺序,我猜它可以用浮动和清除来玩.请帮助我需要帮助.我使用Bootstrap 3作为响应式布局,如何仅使用css更改显示顺序？

Answer 1

@skelly 是对的，您可以使用推和拉类来更改元素的显示顺序。这些课程并不总是为您提供正确的解决方案。

关于此还有很多其他问题，例如，请参阅：需要能够在移动设备上交换网格

因为您想要更改移动设备（xs 网格）/平板电脑视图（md 网格）中的 100% 宽度行（黄色行），所以您无法通过浮动和/或推拉来解决此问题。

我也相信你不能只用 CSS 而不修复一些参数来做到这一点。

当我考虑到不同视图的某些已知/固定元素的高度时，我可以使用 css 和媒体查询来解决它： http: //bootply.com/85303

CSS：

@media (max-width: 768px)
{
.yellow {margin-top:-60px;}
.orange {margin-top:40px;}
.col-xs-12{float:left;}
}
@media (min-width: 992px) and (max-width:1199px)
{
    .col-md-12 {float:left;}
    .darkgreen{float:right; margin-top:-60px;}
}   
@media (min-width: 1200px)
{
.blue{margin-top:-60px}
}

html：

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div>
    </div>

    <div class="row">
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div>
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style="">
    <div class="row">
        <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div>
        <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div>
    </div>  
    </div>
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div>
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div>  
    </div>

</div>

请注意，某些元素是通过添加（负）上边距而更改的。只有当我知道他们的身高时我才能做到这一点。col-xs-12另请注意，我为和添加了一个 float:left col-xs-12。

在实际情况下，您不知道高度，您可以尝试使用 javascript 计算它（可能使用 respond.js 进行媒体查询）并添加顶部边距。我不知道这是否会给你一个更好的解决方案，然后当你使用 jQuery 来操作你的 DOM 时，请参阅：Add new row and moving columns classes on resize