title: How does Mailchimp manages to move box below antoher one when window size changes size (css3/media queries)
body: <p>I'm not a huge expert on CSS3 and i wonder how mailchimp manages to get on their <a href="https://login.mailchimp.com/" rel="nofollow noreferrer">sign in page</a>, to put the "stay logged in" box go under the login box and both extend to a 100% width (rather than 50% for each when there is a wider screen size).</p>
  
  <p>As I am not an expert, I wonder if they do it by pure standard CSS (something easy) or if they use media queries (i heard about it). 
  If it's media queries, then I'll try to dig into that!</p>
  
  <p>Here are the 2 pictures:</p>
  
  <ul>
  <li>for a quite large screen, eahc button share 50% width on a same horizontal line</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/dpybT.png" alt="enter image description here"></p>
  
  <ul>
  <li>for smaller screens, each button spread on the whole width (100% width) and spans over 2 lines</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/e2kQq.png" alt="enter image description here"></p>