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

Twitter bootstrap 如何使用Bootstrap 3更改元素的显示顺序,twitter-bootstrap,twitter-bootstrap-3,elements,Twitter Bootstrap,Twitter Bootstrap 3,Elements,有人能帮我吗?我正在思考如何使用引导来实现这一点,有人有线索吗?我不知道如何更改元素的显示顺序,我猜这是在玩浮动和清除。 请帮帮我,我需要帮助。 我使用Bootstrap3进行响应性布局,如何仅使用css更改显示顺序 @skelly是对的,您可以使用push和pull类来更改元素的显示顺序。这些类并不总是为您提供正确的解决方案 关于这一点,还有许多其他问题,例如: 因为您想要更改移动(xs网格)/平板电脑视图(md网格)中的100%宽度行(黄色行),您无法通过浮动和/或推拉解决此问题 我还相信,

有人能帮我吗?我正在思考如何使用引导来实现这一点,有人有线索吗?我不知道如何更改元素的显示顺序,我猜这是在玩浮动和清除。 请帮帮我,我需要帮助。 我使用Bootstrap3进行响应性布局,如何仅使用css更改显示顺序


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

关于这一点,还有许多其他问题,例如:

因为您想要更改移动(xs网格)/平板电脑视图(md网格)中的100%宽度行(黄色行),您无法通过浮动和/或推拉解决此问题

我还相信,如果不修改一些参数,就不能仅使用CSS进行thsi

当我考虑到一些元素的高度已知/固定为不同的视图时,我可以用CSS和媒体查询来解决它:

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

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

1.
2.
3.
4.
注:某些元素通过添加(负)上边距进行更改。只有当我知道他们的身高时,我才能这样做。还要注意,我添加了一个float:left用于
col-xs-12
col-xs-12


在您不知道高度的实际情况下,您可以尝试使用javascript计算高度(对于媒体查询,可以使用respond.js)并添加顶部边距。我不知道这是否会为您提供一个更好的解决方案,当您使用jQuery操作DOM时,请参阅:

使用
push
pull
类--