如何使用css網格和元素的相反順序進行響應

Question

我有一個帶有兩個éléments的html代碼，我想在響應時將它們反轉，如下所示：

有可能在CSS或我必須在JS嗎？ （對不起，如果英語不好）

Answer 1

更新：

如果您的元素具有已知的寬度和高度，則可以使用direction：rtl和display：inline-block來實現元素和@media查詢，並在較小的屏幕上進行絕對定位， 請參見demo ： http : //jsbin.com/wufuwibuhe/編輯？HTML，CSS，輸出

 #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; } } 

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

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

使用引導程序

<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