0

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>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
Lucid Polygon
  • 542
  • 9
  • 26
  • on top as in mean you should only able to see the first div and the second div is covered by the first? – Manas Feb 12 '18 at 09:02

1 Answers1

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>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
  • Thank You Sebastian. I just applied it. But the issue is that on large screen device these divs gets stacked vertically. The behavior I require is horizontally stacked on large device and reverse vertically stack on smaller device. – Lucid Polygon Feb 12 '18 at 09:15
  • see the update: `flex-md-row` instead of `flex-md-column`. – Sebastian Brosch Feb 12 '18 at 09:18