透過推/拉等寬元素重新排序Bootstrap 欄位
使用Bootstrap 的網格系統時，調整列的順序至關重要用於響應式佈局。但是，使用推/拉指令對相同大小的列重新排序可能具有挑戰性。
推/拉可以用於 .col-*-12 元素嗎？
不，不可能更改具有「.col-xs-12.col-xs-push-12」和「.col-xs-12.col-xs-pull-12」等類的列的順序，因為組合寬度超出了Bootstrap 的12 列網格定義。
替代方案：
1。在HTML 中重新排列並為更大的螢幕使用排序類別
重新排列HTML 中的列順序並應用推/拉類以在更大的螢幕上實現所需的排序：
<code class="html"><div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>test2</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<p>test1</p>
</div>
</div></code>2.用於垂直列重新排序的CSS 轉換
利用CSS 轉換來反轉彼此垂直下方顯示的列的順序：
<code class="css">@media (max-width: 767px) {
.row.reorder-xs {
transform: rotate(180deg);
direction: rtl;
}
.row.reorder-xs > [class*="col-"] {
transform: rotate(-180deg);
direction: ltr;
}
}</code>注意： CSS 轉換是IE9 中支援帶有供應商前綴的。
以上是推/拉類可以用於等寬引導列嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
