1

I'm trying to change the position of 2 divs on my page.
This is how it should look on large screens
I'm using bootstrap to fix the layout of the screen

d-flex justify-content-start

And this is how it should look on medium and lower screens
Thought of using this bootstrap class for the medium screens

d-flex flex-column-reverse

Notice the orders of divs 1 and 2.

Oliver Robie
  • 818
  • 2
  • 11
  • 30
  • 1
    Could you show the code that you're using? Or maybe a codepen so that we see what you have done? – Charlene Vas Sep 26 '19 at 13:48
  • 1
    You can find better ways here. [https://stackoverflow.com/questions/46611735/bootstrap-change-the-order-of-element](https://stackoverflow.com/questions/46611735/bootstrap-change-the-order-of-element) – Tec J Sep 26 '19 at 14:01
  • 1
    Thanks for your answers. I'll check them out tomorrow :) – Oliver Robie Sep 26 '19 at 18:34

2 Answers2

3

You could just use the custom bootstrap order classes and grid classes to achieve this. No need for media queries. Just specify order-lg-1 for large screens on DIV 1 and order-md-2 so it will be ordered 2nd on medium screens. Likewise, on DIV 2 use the class order-lg-2 so it will be ordered 2nd on large screens but order-md-1 so it will be ordered 1st on medium screens.

HTML could look something like:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-12 order-lg-1 order-md-2 customDiv">DIV 1</div>
    <div class="col-lg-9 col-md-12 order-lg-2 order-md-1 customDiv">DIV 2</div>
  </div>
</div>

CSS could be something as simple as: 

.customDiv {
  border: 5px solid black;
  height: 400px;
}

Link to codepen that shows this: https://codepen.io/andyreesecups-the-decoder/pen/mdbgEVY

Link about bootstrap grid classes: https://getbootstrap.com/docs/4.0/layout/grid/

Andrew Reese
  • 854
  • 1
  • 11
  • 27
0

Your div class names should be: 

<div class="row">
 <div class="col-lg-9 col-12 order-lg-11">Div 2</div>
 <div class="col-lg-3 col-12 order-lg-1">Div 1</div>
</div>

Remember to be mobile first.

Edit: had them switched the wrong way.

aqua
  • 23
  • 9