Bootstrap 4 Columna sin método de mampostería

Question

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

html css bootstrap-4

1

Meena Loshini 23 oct. 2019 a las 08:29

Answer 1

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>

0

JustCode 23 oct. 2019 a las 08:48

Answer 2

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>

-1

Nitha 23 oct. 2019 a las 05:42

Answer 3

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>

0

kiranvj 23 oct. 2019 a las 08:36

Bootstrap 4 Columna sin método de mampostería

3 respuestas

Nuevas preguntas

html