如何更改引导程序中元素的顺序？

Question

这是我的代码：

<div class="container">
  <div class="right col-md-4">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-md-8">this should be on the left side and on the bottom (in small screen size)</div>
</div>

<style>
.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}
</style>

样本

.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="right col-md-4">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-md-8">this should be on the left side and on the bottom (in small screen size)</div>
</div>

正如您在演示中看到的那样，红色边框应该是右侧（当前位于左侧），并且应该位于小屏幕尺寸的顶部（现在位于顶部且位置正确的位置）。

无论如何，我怎么能把它拉到右侧？注意到我不想使用pull-right。因为我需要让它以小屏幕尺寸为中心。

Answer 1

应该是：

<div class="container">
    <div class="right col-md-4 col-md-push-8">this should be on the right side and on the top (in small screen size)</div>
    <div class="left col-md-8 col-md-pull-4">this should be on the left side and on the bottom (in small screen size)</div>
</div>

Answer 2

您可以使用PULL执行此操作，我知道您不想使用它，但您可以通过以下方式尝试将其与PUSH结合使用

https://jsfiddle.net/m7vxm9cr/

.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}

<div class="container">
   <div class="right col-xs-12 col-sm-12 col-md-push-6 col-md-6">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-xs-12 col-sm-12 col-md-pull-6 col-md-6">this should be on the left side and on the bottom (in small screen size)</div>
</div>  

Answer 3

您应该添加col-sm-6和col-xs-6来处理bootstrap then grid system中的小屏幕，然后使用{{1}覆盖在bootsrap类中的float:left col-md-* }}

请参阅代码段

.container .right{float:right}

.container{
  border: 1px solid;
}

.container .right{
  border: 1px dashed red;
  float:right ;
}

.left{
  border: 1px dashed green;
}

Answer 4

.parent{display:flex;}.child1{order:1;}.child2{order:2;}更改媒体查询中子元素的顺序。