Order of the elements in Bootstrap 4

Navigation
3

I'm looking for some way to sort the div so that the image is always on top of the texts, the idea is that when it is in PC you can see one next to the other and in mobiles there is always the image above the texts , the way I have the first block the image is below the text, I thought of an @media to hide the image and put another one when it is in mobiles, but it could be a bit heavy to the echo of being able more photos in the page, if anyone knows how to fix it, I'm only using 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>
    
asked by Aaron M Fonseca 19.07.2018 в 21:31
source

2 answers

2

With Bootstrap4 You can use flex to reorder the 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>

More information on Flex .

With the Bootstrap grid it is also possible: 

  <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

A deeper application here with Flexbox and pure CSS.

    
answered by 19.07.2018 / 22:15
source
3

If what you are looking for is ordering the elements according to the size of the screen Bootstrap4 has classes for that purpose (order- *). I'll give you an example and also Here you can see more details of its use. 

 <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>
    
answered by 19.07.2018 в 22:28
Problems with the following MySQL query How to hide ID on routes laravel 5?