title: How to set up Bootstrap structure for footer
body: <p>I am having trouble seting up HTML5 structure in Bootstrap 4 grid system to look like attached image. It needs to look like top image if device (phone, phablet or tablet is in portrait mode) and bottom if they are in landscape mode.</p>
  
  <p>Images<br>
  <a href="https://www.dropbox.com/s/rp5bof5ea9mrut7/Capture.PNG?dl=0" rel="nofollow noreferrer">img 1</a>
  <br>
  <a href="https://www.dropbox.com/s/5n8idl7maeewoz1/Capture%202.PNG?dl=0" rel="nofollow noreferrer">img 2</a></p>
  
  <p>Code<br>
  <a href="https://jsfiddle.net/tokdwvkg/" rel="nofollow noreferrer">https://jsfiddle.net/tokdwvkg/</a></p>
  
  <pre><code>&lt;footer&gt;&lt;!-- Code is too long to post, so see jsfiddle --&gt;&lt;/footer&gt;
  </code></pre>