Estoy trabajando en un diseño de 4 columnas de bootstrap.
A continuación está mi código
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-6">Section 1</div>
<div class="col-6"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
<div class="col-6"> Section 3</div>
<div class="col-6"> Section 4</div>
</div>
</div>
Puede ver Hay cuatro secciones, separadas usando col-6, quiero hacer que la sección 3 vaya a continuación del contenido de la sección 1. Sé que hay un diseño de mampostería para esto, pero ¿es posible lograr esto sin eso?
Ayuda amablemente porque en respuesta, quería la sección 2 debajo de la sección 1, pero en modo normal este diseño es lo que necesitaba. no quiero usar el mismo código dos veces escondiéndome y mostrando
3 respuestas
Debe ajustar parte del código para obtener la salida personalizada que está buscando.
.row{
display:block;
}
.col-6{
float:left;
}
.float-right{
float:right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-6">Section 1</div>
<div class="col-6 float-right"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
<div class="col-6"> Section 3</div>
<div class="col-6"> Section 4</div>
</div>
</div>
Escriba el contenido en una sección dentro de un col-6 y otra sección dentro de la otra col-6
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<p>section 1</p>
<p>Section 3 Content.</p>
</div>
<div class="col-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in.</p>
<p>Section 4 Content.</p>
</div>
</div>
</div>
Hay una clase order-*
en Bootstrap, debe usar que. Por favor, consulte el siguiente código.
Utilice .order- classes para controlar el orden visual de su contenido. Estas clases son receptivas, por lo que puede establecer el orden por punto de interrupción (por ejemplo, .order-1.order-md-2). Incluye soporte para 1 a 12 en los cinco niveles de cuadrícula.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-6 order-1">Section 1</div>
<div class="col-6 order-3"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
<div class="col-6 order-2"> Section 3</div>
<div class="col-6 order-4"> Section 4</div>
</div>
</div>
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].