Disposez les cartes à gauche et à droite à l'aide BS4, sans avoir les colonnes parent

Question

En utilisant Bootstrap 4 et sans Javascript, comment puis-je créer un arrangement comme celui-ci lorsque la fenêtre est grande:

Et un arrangement comme celui-ci lorsque le viewport est contraint:

la seule façon que je pouvais le faire pour ressembler à la grande disposition de la fenêtre était en faisant ceci:

<div class="row justify-content-center"> 

    <div class="col-8 column-1"> 

    <form class="card text-center" action="runthis" method="GET"> 
     <div class="card-header">Hello</div> 
     <div class="card-block"> 
     <input type="text" class="form-control input-lg" name="full_name" placeholder="Full Name" autofocus="" /> 
     <input type="text" class="form-control input-lg" name="full_name2" placeholder="Full Name/> 
     <input type=" text " class="form-control input-lg " name="full_name3 " placeholder="Name " /> 
     <button name="Submit " value"submit " class="btn btn-primary ">Submit</button> 
     </div> 
    </form> 

    </div> <!-- end column-1 --> 

    <div class="col-4 column-2"> 
    <div class="card p-3"> 
     <blockquote class="card-block card-blockquote"> 
     <h4 class="card-title ">Card title</h4> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
     </blockquote> 
    </div> 
    <div class="card"> 
     <div class="card-block "> 
     <h4 class="card-title ">Card title 2</h4> 
     <p class="card-text ">This card has supporting text below as a natural lead-in to additional content.</p> 
     <p class="card-text "><small class="text-muted ">Last updated 3 mins ago</small></p> 
     </div> 
    </div> 
    </div> 
</div> 

Vous pouvez voir ce code en action à https://codepen.io/anon/pen/ZKoPWx

Comme vous pouvez le voir dans ce code ci-dessus, il ne permet pas la possibilité de s'effondrer comme désiré lorsque la fenêtre est limitée en raison des colonnes parent du sections gauche et droite.

Comment puis-je faire cela sans colonnes parent?

Answer 1

Utilisez les nouvelles classes d'utilitaires BS 4 pour faire flotter les colonnes en conséquence sur des écrans plus grands. Ensuite, ils vont empiler sur leur ordre naturel sur des écrans plus petits (xs).

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

<div class="container-fluid"> 
    <div class="row d-block"> 
     <div class="col-sm-4 float-sm-right"> 
      <div class="card p-3"> 
       card 2 
      </div> 
     </div> 
     <div class="col-sm-8 float-sm-left"> 
      <form class="card text-center" action="runthis" method="GET"> 
       card 1 
      </form> 
     </div> 
     <div class="col-sm-4 float-sm-left"> 
      <div class="card"> 
       <div class="card-block "> 
        card 3 
       </div> 
      </div> 
     </div> 
    </div> 
</div>