html - Espacio vertical vacío entre columnas en Bootstrap 4

css twitter-bootstrap

Question

Tengo esta estructura html:

<div class="container">
<div class="row">
<div class="col-lg-9 description"></div>
<div class="col-lg-3 sidebar"></div>
<div class="col-lg-9 comments"></div>
</div>
</div>

El efecto final es este: Necesito esta estructura HTML porque cuando tengo una ventana gráfica más pequeña y Bootstrap cambia al modo de 1 columna, necesito que la columna de la barra lateral vaya entre las columnas de descripción y comentarios (donde en realidad hay un espacio vacío).

El problema es que quiero evitar tener ese espacio vacío cuando la plantilla no está en "modo móvil".

Lo intenté de muchas maneras pero no puedo lograr esto, ¿alguien podría ayudarme?

EDITAR

Lo intenté de esta manera:

<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="description"></div>
<div class="comments"></div>
</div>
<div class="col-lg-3 sidebar"></div>
</div>
</div>

E intenté reordenar usando el "orden" css, pero no funcionó (lo único que me permite hacer es poner la barra lateral al comienzo de la página, pero no es lo que quiero).

Answer 1

Está sucediendo porque Bootstrap 4 es flexbox , y todas las columnas tienen la misma altura que la columna más alta ...

En lugar de esto:

 ------------------ ---------
| || |
| || |
------------------ | |
------------------ | |
| || |
------------------ ---------

Obtienes esto:

 ------------------ ---------
| || |
| || |
------------------ | |
| |
| |
------------------ ---------
| |
------------------

Por lo general, puede solucionar esto (como lo intentó) anidando las columnas, pero no obtendrá el orden de columnas deseado ...

Anidamiento:

<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12 description"></div>
<div class="col-lg-12 commments"></div>
</div>
</div>
<div class="col-lg-3 sidebar"></div>
</div>
</div>

Sin embargo, para obtener el orden de columna deseado, las columnas deben estar contenidas en un único .row .

Flotadores:

Entonces, la solución en BS4 es usar flotadores (como lo hizo BS3) como se explica aquí: Bootstrap 4 - No quiero que las columnas tengan la misma altura . Me gusta esto:

https://www.codeply.com/go/wnRnLl3Jmo

<div class="container">
<div class="row d-lg-block">
<div class="col-lg-9 float-left description">Desc</div>
<div class="col-lg-3 float-right sidebar">Sidebar</div>
<div class="col-lg-9 float-left comments">Comments</div>
</div>
</div>

El d-lg-block establece display:block en la fila en lugar de display:flex que permite que las columnas floten en anchos de pantalla lg .

Relacionado:
Bootstrap con diferente orden en la versión móvil

Answer 2

.description {
background-color: red
}
.sidebar {
background-color: blue
}
.comments {
background-color: green
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 description">description</div>
</div>
<div class="row justify-content-end">
<div class="col-12 col-lg-3 sidebar">sidebar</div>
</div>
<div class="row">
<div class="col-12 col-lg-9 comments">comments</div>
</div>
</div>
</div>

Creo que esto es lo que buscas