title: How to display buttons as inline/block elements when one button is wrapped into a form?
body: <p>How to display two buttons as block elements on small screens as well as inline elements on larger screens, when one of the buttons is wrapped inside a form?</p>
  
  <p>I have two buttons, one is only a local link, the other one is wrapped (by my colleague) inside a from. Now I'm getting problems when displaying the page on smaller screens. The button inside the form will not appear as a block element anymore.</p>
  
  <p>Result should look like this:</p>
  
  <p><strong>Small screen:</strong> </p>
  
  <p>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| </p>
  
  <p>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</p>
  
  <hr>
  
  <p><strong>Large screen:</strong></p>
  
  <p>| button1 | | button2 |</p>
  
  <hr>
  
  <p><strong>My code so far</strong>: </p>
  
  <p><a href="https://www.bootply.com/CETPAyWp2K" rel="nofollow noreferrer">https://www.bootply.com/CETPAyWp2K</a></p>
  
  <p>(resize screen width to see the effect)</p>