如何做到响应css网格和逆序元素

Question

我有一个包含两个éléments的HTML代码，我想在响应中反转它们，如下所示：

在CSS中是否可以或者我必须在js中执行此操作？ （对不起，如果英语不好）

Answer 1

更新

如果您的元素已知宽度和高度，您可以使用方向实现：rtl和display：内联块用于元素和@media查询，在较小的屏幕上具有绝对定位，参见演示： http://jsbin.com/wufuwibuhe/edit?html,css,output

＆＃13;

＆＃13;

#container{
  direction:rtl;
  text-align:left;
}

element{
  width:250px; 
  border: 1px solid #000;
  height:100px;
  text-align:center;
  display:inline-block; 
  direction:ltr; // restore direction   inside element
}

@media (max-width:530px){
  #container{                  
    height:210px;
    position:relative;
  }
  
  element{    
    position:absolute;
    top:0;
    left:0
  }
  
  element:first-of-type{  
    top:auto; 
    bottom: 0;
  }

}

＆＃13;

  <h1>Resize me!</h1>
  <div id="container">
    <element first-of-type>1</element>
     <element>2</element>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样使用display flex和order：

<div class="container">
   <div>element 1</div>
   <div>element 2</div>
</div>

.container{
   display:flex;
   flex-direction: column;
 }


 .container div:nth-child(1){
   order:2;
 }

 .container div:nth-child(2){
   order:1;
 }

//change the 1024px for you desktop size target
@media (min-width:1024px){

 .container div:nth-child(1){
   order:1;
 }

 .container div:nth-child(2){
   order:2;
 }
}

希望有所帮助

Answer 3

使用bootstrap

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

此处描述了您的具体问题： http://getbootstrap.com/css/#grid-column-ordering