html css twitter-bootstrap bootstrap-4

html - Un div alto junto a dos divs más cortos en Desktop y apilados en Mobile con Bootstrap 4



css twitter-bootstrap (1)

Esto es similar a esta pregunta here pero ligeramente diferente.

Quiero volver a ordenar tres divs en el móvil y tenerlos uno al lado del otro en el escritorio. Vea las imágenes adjuntas de los resultados deseados:

Estaba teniendo muchos problemas para describir esto, ¡así que espero que las fotos ayuden!

EDITAR: Aquí hay un fragmento de código que funciona duplicando código:

const Main = () => ( <section className="" id="section-2"> <div className="container"> <div className="row"> <div className="col-12 d-md-none"> <div className="text-center"> <span className="text-uppercase small-text small-text--lighter">step 2</span> </div> <div className="text-center"> <h2 className="text-center">HEADER 2</h2> </div> </div> <div className="col-12 col-md-6"> <img alt="tbd" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png" /> </div> <div className="col-12 col-md-5 offset-md-1 text-center text-md-left"> <div className="d-flex flex-column justify-content-between align-items-center align-items-md-start"> <div className="d-none d-md-block"> <span className="text-uppercase small-text small-text--lighter">step 2</span> </div> <div className="d-none d-md-block"> <h2 className="">HEADER 2</h2> </div> <div> <p>SOME PARAGRAPH TEXT</p> </div> </div> </div> </div> </div> </section> ) ReactDOM.render( <Main />, document.getElementById("react") );

img { height: auto; width: 100%; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


Debe deshabilitar el flexbox para anchos más grandes porque el flexbox de Bootstrap 4 hace que las columnas tengan la misma altura. Luego, use flotadores para que las columnas B y C se muevan naturalmente hacia la derecha, ya que A es más alta. El pedido de flexbox funcionará para reordenar los cols en el móvil ...

Escritorio ABC, BAC mobile

<div class="container-fluid"> <div class="row d-flex d-lg-block"> <div class="col-lg-6 order-1 float-left"> A </div> <div class="col-lg-6 order-0 float-left"> B </div> <div class="col-lg-6 order-1 float-left"> C </div> </div> </div>

Relacionados: Bootstrap con diferente orden en versión móvil.