title: Using Flex CSS and Bootstrap for a responsive layout
body: <p>I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.</p>
  <p>I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two  goes below the left, main content section. I want to split it up as the screen caps below state.</p>
  <p>This is the starting view:</p>
  <p><a href="https://i.stack.imgur.com/4XVfh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4XVfh.png" alt="enter image description here" /></a></p>
  <p>This is what I want to happen:</p>
  <p><a href="https://i.stack.imgur.com/jLJ14.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jLJ14.png" alt="enter image description here" /></a></p>
  <p>This would be the mobile phone view:</p>
  <p><a href="https://i.stack.imgur.com/zUL8l.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zUL8l.png" alt="enter image description here" /></a></p>
  <p>So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.</p>
  <p>It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.</p>
  <p>For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.</p>