1
votes

Bootstrap 4 Colonne sans méthode de maçonnerie

Je travaille sur une disposition de colonne bootstrap 4.

Voici mon code

<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>

Vous pouvez voir Il y a quatre sections, séparées par col-6, je veux faire de la section 3 pour aller au-dessous du contenu de la section 1. Je sais qu'il existe une disposition en maçonnerie pour cela, mais est-ce possible d'y parvenir sans cela?

Veuillez aider car en réactif, je voulais la section 2 sous la section 1 mais en mode normal, cette disposition est ce dont j'avais besoin . je ne veux pas utiliser le même code deux fois en masquant et en affichant

html css bootstrap-4

2 commentaires

Si la classe .row est définie sur flex, vous pouvez utiliser la propriété: order sur ses fils

Vous devez modifier une partie du code pour obtenir la sortie personnalisée que vous recherchez. Voici mon code. jsfiddle.net/rakeshnayak/g30rk5me/9

3 Réponses :

-1
votes

Veuillez écrire le cntent sin une section dans un col-6 et l'autre dans l'autre 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 commentaires

Salut Merci pour la réponse, je souhaite afficher la section 2 ci-dessous la section 1 sur le responsive afin que votre solution ne soit pas applicable.

0
votes

Vous devez modifier une partie du code pour obtenir la sortie personnalisée que vous recherchez.

<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>

.row{
  display:block;
}
.col-6{
  float:left;
}
.float-right{
  float:right;
}

0 commentaires

0
votes

Il existe une classe order- * dans Bootstrap, vous devez utiliser que . Veuillez vérifier le code ci-dessous.

Utilisez .order- classes pour contrôler l'ordre visuel de votre contenu. Ces classes sont réactives, vous pouvez donc définir l'ordre par point d'arrêt (par exemple, .order-1.order-md-2). Inclut la prise en charge de 1 à 12 sur les cinq niveaux de grille.

<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 commentaires