title: How to move a div from inside a div to right under it on small screens using bootstrap4
body: <p><a href="https://i.stack.imgur.com/t10lX.jpg" rel="nofollow noreferrer">enter image description here</a>
  I have a div(div1) containing another div(div2)
  I want to know how to move div1 to under div2 on small screens
  I am using bootstrap4</p>
  
  <p>I tried to use row and col classes but it didn't work</p>
  
  <p>(  (div2)      )&lt;---- div2 inside div1
  i need:
  (div1)
  (div2) on top of each other</p>
  
  <p>Edit:</p>
  
  <pre><code>&lt;div id="div1" style="background:url("sdic/sdv.jpg") center no-repeat cover;"&gt;
   &lt;div id="div2"&gt;
    Some content
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the div2 to go under div1 and div will stay with the background image inside</p>