Bootstrap 4: how to change the order of a columns when the screen size changes

Admin 1
Viewed 4212

I want my website to have on md size screens and larger a phone on the right and text on the left. But once the screen size is smaller than md, I want the text to be bellow the phone. 

<section id="" class="pt-3 mt-3">
    <div class="container">
      <div class="row">
        <div class="col-md-6 my-auto text-right">
          <h3 class="display-3 lato_text">Description</h3>
          <p class="lead">On the map, click on an OddJob to get a quick preview.</p>
          <p class="lead">In the preview, you will see the title and price of the job.</p>
        </div>
        <div class="col-md-6">
          <div class="text-center">
            <img id="phone-screenshot" src="img/JobFullDesc.jpg" class="img-fluid mb-3">
          </div>
        </div>

      </div>
    </div>
  </section>

How would I change my html to make it so that on md size screens and below, the text would be below the phone.

bootstrap-4 html
1 Answers

You can make use of Bootstrap 4's order classes.

Unfortunately Bootstrap 4's layout classes are mobile-first, so you'll need to specify that the text should come after the image by default, and override this for large screens.

To drop the text below the image on medium and smaller devices, you'll want to give the text the classes order-2 and order-md-1, and the image the classes order-1 and order-md-2.

This can be seen in the following: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section id="" class="pt-3 mt-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6 my-auto text-right order-2 order-md-1">
        <h3 class="display-3 lato_text">Description</h3>
        <p class="lead">On the map, click on an OddJob to get a quick preview.</p>
        <p class="lead">In the preview, you will see the title and price of the job.</p>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <div class="text-center">
          <img id="phone-screenshot" src="http://placehold.it/100" class="img-fluid mb-3">
        </div>
      </div>
    </div>
  </div>
</section>

Note that on small screens (such as with this snippet in the default view), the image comes before the text, yet with larger screens (such as with this snippet in Full page view) the image comes after the text.

user_23416030
Related