3

Estoy buscando alguna manera de poder ordenar los div para que siempre quede la imagen arriba de los textos, la idea es que cuando este en pc se puede ver uno al lado del otro y en mobiles quede siempre la imagen arriba de los textos, de la manera en la que lo tengo el primer bloque la imagen queda debajo del texto, pensé en un @media para ocultar la imagen y colocar otra cuando este en mobiles, pero podría ser un poco pesado al echo de poder mas fotos en la pagina, si alguien sabe de solucionarlo, solo estoy usando Boostrap 4

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

 
 <div class="row">
    <div class="col-12 col-md-7">
        <h1>Basic</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </p>                
    </div>
    <div class="col-12 col-md-5">
        <img class="img-fluid img-thumbnail">
    </div>                        
</div>
<div class="row">                    
    <div class="col-12 col-md-5 ">
        <img class="fluid img-thumbnail">
    </div>
    <div class="col-12 col-md-7 topB">
        <h1>Medium </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </p>             
    </div>                        
</div>

2 respuestas 2

3

Si Lo que busca es ordenar los elementos segun el tamaño de la pantalla Bootstrap4 tiene clases para ese proposito (order-*). Te dejo un ejemplo y ademas Aqui puedes ver mas detalles de su uso.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
 
 <div class="row">
		<div class="col-12 col-sm-12 col-md-6 order-2 order-sm-2 order-md-1 bg-success">
	      	<h1>Description</h1>
	    </div>
	    <div class="col-12 col-sm-12 col-md-6 order-1 order-sm-1 order-md-2 bg-danger">
	    	<h1>Image</h1>
	      	<!-- <img class="img-fluid img-thumbnail"> -->
	    </div>
	</div>

2

Con Bootstrap4 Puedes utilizar flex para reordenar los divs:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Más información sobre Flex.


Con el grid de Bootstrap tambien es posible:

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">


<div class="container">
  <div class="row text-white">
    <div class="col bg-secondary">
      First, but unordered
    </div>
    <div class="col order-12 bg-primary">
      Second, but last
    </div>
    <div class="col order-1 bg-danger">
      Third, but first
    </div>
  </div>
</div>

+Info


Una aplicación más profunda aquí con Flexbox y puro CSS.

1
  • justo lo que estaba buscando Commented el 19 jul. 2018 a las 20:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.