bootstrap, css reordering divs for mob

Question

I have two divs which are placed one after another. On mobile the two divs stacked vertically. Which is fine. But I am trying to reorder it in mobile. When the screen size becomes smaller I want the second div to stay on top of first. I have tried several methods - flexbox order, direction and so on. But is not able to achieve the result.

methods tried: How can I reorder my divs with CSS?

Can some one please help me with it.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3" id="flex">
  <div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="a">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
  <div class="bg-dark text-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="b">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
</div>

Answer 1

You can use flex-column-reverse to switch the position of the elements. You can also use the breakpoints to switch the position only on mobile / small screens. In this case the column is reversed until the md-breakpoint.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column-reverse flex-md-row flex-md-equal w-100 my-md-3 pl-md-3" id="flex">
  <div class="bg-light text-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="a">
    <div class="my-3 p-3">
      <p>Test</p>                               
    </div>
  </div>
  <div class="bg-dark text-white mr-md-3 pt-3 px-3 pt-md-5 px-md-5 overflow-hidden" id="b">
    <div class="my-3 p-3">
      <p>Test</p>
    </div>
  </div>
</div>