Bootstrap - 更改元素的順序

我有2個div與col-md-6。Bootstrap - 更改元素的順序

我希望它變成COL-XS-12移動

但順序應該是：

使用引導，我應該怎麼做才能讓盒子B頂部的盒子A

來源

2017-10-06 KennethC

給出由於只有使用CSS？ – xxLITxx

使用引導程序 – KennethC

您是否嘗試使用flexbox屬性「訂單」？ –

您可以使用柔性容器來訂購元素。

外部div設置爲「display：flex;」內部元素得到一個訂單。通過給元素B的順序爲1，元素A的順序爲2.元素B將放置在A之前，即使A在代碼中是第一位。

下面是我寫的一段代碼示例;

#flex-container{ 
    display: -webkit-flex; /* Safari */ 
    display: flex; 
} 

#a, #b{ 
    height: 200px; 
    width: 200px; 
} 

#a{ 
    order: 2; 
    background-color:#000; 
} 
#b{ 
    order: 1; 
    background-color:#575757; 
} 
<div id="flex-container"> 
    <div id="a"></div> 

    <div id="b"></div> 
</div>

W3學校也有柔性的排序有很大的示範作用在這裏https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order

來源

2017-10-06 18:27:35 TidyDev

嘗試使用Flexbox的的「命令」屬性中的CSS。

默認情況下，Flex項目按照它們在源文檔中顯示的順序顯示。訂單屬性可用於更改此訂單。

示例代碼，以幫助您瞭解這一點：https://jsfiddle.net/bhyqeq5x/

在上面的JS小提琴，上述700像素，它呈現爲AB（正常行爲），但低於700像素，我改變柔性盒的方向列，因此它顯示爲一個在另一個之下並根據您的要求更改A和B的順序。

@media only screen and (max-width: 700px) { 
    .container {  
    flex-direction : column; 
    } 
    .A { 
    order : 2; 
    } 
    .B { 
      order : 1; 
    } 
}

如果這對您沒有幫助，請在下面的評論中告知我。

來源

2017-10-06 18:47:04

哇，我不知道之前有這樣的事情。謝謝！ upvoted – KennethC

@KennethC：在CSS中使用flexbox可以實現很多功能。嘗試閱讀https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

@KennethC：如果這對您有幫助，您能否將其標記爲接受的答案以幫助未來的其他人？ –

如果您使用的是Bootstrap V4，則只需在媒體查詢中使用flex-direction: row-reverse;即可。

或者

如果您正在使用Bootstrap V3簡單地使用媒體查詢float: right;爲col-*並把HTML下面

<div class="col-xs-12 col-sm-6">B</div> 
    <div class="col-xs-12 col-sm-6">A</div>

來源

2017-10-06 18:48:06

Bootstrap - 更改元素的順序

回答

相關問題