0

I have simple columns layout: diagram-columns

On smaller screen I want Component 2 to be the last component, placed after Component 3:

enter image description here

Is it possible to modify following html to meet the resposive layout criteria?

<div class="row">
  <div class="col-lg-8">
    <div id="component1"></div>
    <div id="component2"></div>
  </div>
  <div class="col-lg-4">
      <div id="component3"></div>
  </div>
</div>
Liero
  • 25,216
  • 29
  • 151
  • 297

1 Answers1

-1

You will be able to use the flexbox order property in order to change the ordering of elements. As you are using Bootstrap 4, you can read Bootstraps documentation on order classes.

As shown in Bootstrap example, it can work like this:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Bootstrap also has responsive variations also exist for order. For example, the class names would look like this:

.order-sm-0
.order-md-4
.order-lg-2
Karl
  • 854
  • 9
  • 21