Ho scaricato Bootstrap 4, set $enable-flex true e ricompilato.
Ho una domanda su Bootstrap 4 e flexbox.
Se riduci la dimensione della home page di Twitter, tuposso vedere che la parte di "Who to follow" si sta spostando da destra a sinistra del sito (ma il feed principale non viene influenzato da quello), e questa è la cosa che voglio fare usando Bootstrap 4 e flexbox. quando ridimensiono la finestra (per una dimensione ipotetica come sm), #right inizierà dopo #left. #middle è la sezione del feed.
Come posso farlo?
Ecco la mia attuale configurazione.
#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>risposte:
0 per risposta № 1Sembra che tu abbia bisogno di un div col- come involucro per ordinare gli elementi flessibili. Il che ha senso, perché solo gli articoli flessibili possono essere ordinati. Non il contenitore flessibile.
@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>