Descargué Bootstrap 4, set $enable-flex true y recompilado.
Tengo una pregunta sobre Bootstrap 4 y flexbox.
Si reduce el tamaño de la página de inicio de Twitter,puedo ver que la parte "Quién seguir" se está moviendo desde el lado derecho hacia el lado izquierdo del sitio (pero la alimentación principal no se ve afectada por eso), y esto es lo que quiero hacer usando Bootstrap 4 y flexbox. cuando redimensiono la ventana (para un tamaño hipotético como sm), #right comenzará después #left. #middle Es la sección de alimentación.
¿Cómo puedo hacerlo?
Aquí está mi configuración actual.
#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>Respuestas
0 para la respuesta № 1Parece que necesitas un div con col- como un envoltorio para ordenar los artículos de flexión. Lo que tiene sentido, porque solo se pueden pedir los artículos flexibles. No es el contenedor flexible.
@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>