Bootstrap 4和列訂購

我下載了Bootstrap 4，設置爲$enable-flex true並重新編譯。Bootstrap 4和列訂購

我有一個關於Bootstrap 4和flexbox的問題。

如果您減小Twitter主頁的大小，您可以看到「誰跟隨」部分正在從站點的右側移動到左側（但主要饋送不受此影響），這是我想用Bootstrap 4和flexbox來做這件事。所以，當我調整窗口的大小時（對於像sm這樣的假設大小），#right將在#left之後開始。 #middle是供稿部分。

我該怎麼辦？

這是我目前的設置。

#left { 
 
    background: yellow; 
 
} 
 
#middle { 
 
    background: brown; 
 
} 
 
#right { 
 
    background: #a8d6fe; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 col-md-2" id="left"> 
 
     <div class="col-md-12">PROFILE</div> 
 
     <div class="col-md-12" id="menu">MENU</div> 
 
    </div> 
 
    <div class="col-sm-9 col-md-7" id="middle">NEWS</div> 
 
    <div class="col-sm-3 col-md-3" id="right">RIGHT PART</div> 
 
    </div> 
 
</div>

來源

2015-09-18 salep

你有沒有嘗試'＃middle'的'order'更改爲'1'針對特定的屏幕尺寸？ – DavidDomain

你可以給你正在說的twitter頁面的鏈接嗎？ – pbenard

@Yenne信息我正在談論Twitter的新聞推送，你登錄後看到的頁面。 – salep

看起來你需要col-一個div作爲包裝訂購柔性物品。這是有道理的，因爲只有彈性物品可以訂購。不是柔性容器。

@import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'); 
 

 
[class*="col-"] { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
#left{ 
 
    background:yellow; 
 
} 
 

 
#middle { 
 
    background:brown; 
 
    order: 1; 
 
} 
 

 
#right { 
 
    background:#a8d6fe; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div class="col-sm-3 col-md-2" id="left"> 
 
     <div class="col-md-12">PROFILE</div> 
 
     <div class="col-md-12" id="menu">MENU</div> 
 
     </div> 
 
     <div class="col-sm-9 col-md-7" id="middle">NEWS</div> 
 
     <div class="col-sm-3 col-md-3" id="right">RIGHT PART</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-18 13:54:37 DavidDomain

Bootstrap 4和列訂購

回答

相關問題