title: Making This Javascript Countdown Timer Responsive
body: <p>I am currently using a modified version of a JS countdown element for a site coming up. I've been learning a ton of how to use flex grids but haven't done a lot with block/inline-block, etc. </p>
  
  <p>Currently when the countdown hits around 945px, the 4 inline-block boxes stay as 4 columns and end up overflowing to the edge of the screen: 
  <a href="https://i.stack.imgur.com/EV2Ls.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EV2Ls.png" alt="enter image description here"></a></p>
  
  <p>My desired result would be at around 945px, the 4 columns would collapse to 2 side by side, with the text still being under their proper boxes. I was messing around altering the code in "inspect" in chrome and accidentally succeeded in doing this, but the 4 lines of text were still below the element with the boxes rather than in their proper place. Here is what my desired result looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/e73iF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e73iF.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the code:</p>
  
  <p><a href="https://codepen.io/Lancewalker/pen/QxpbZx" rel="nofollow noreferrer">https://codepen.io/Lancewalker/pen/QxpbZx</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function (){
  
  function countdown() {
  
  var now = new Date();
  var eventDate = new Date(2019, 0, 1);
  var currentTime = now.getTime();
  var evenTime = eventDate.getTime();
  
  var remTime = evenTime - currentTime;
  
  var sec = Math.floor(remTime / 1000);
  var min = Math.floor(sec / 60);
  var hur = Math.floor(min / 60);
  var day = Math.floor(hur / 24);
  
   hur %= 24;
   min %= 60;
   sec %= 60;
  
  hur = (hur &lt; 10) ? "0" + hur : hur;
  min = (min &lt; 10) ? "0" + min : min;
  sec = (sec &lt; 10) ? "0" + sec : sec;
  
  $('.seconds').text(sec);
  $('.minutes').text(min);
  $('.hours').text(hur);
  $('.days').text(day);
  
  setTimeout(countdown, 1000);
  }
  
  countdown();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
      background-color: #333;
  }
      .container {
      width: 800px;
      height: 350px;
      margin:  auto;
      text-align: center
  }
  
      .container h2 {
      color: #fff;
      font-size: 30px;
      font-family: Exo, Arial, Sans-serif;
      padding: 50px 0 20px;
      font-weight: normal
  }
  
      .container .content {
      width: 100%;
  }
  
      .container .content &gt; div {
      display: inline-block;
      margin: 35px 10px 0;
      width: 120px;
      height: 130px;
      background: rgb(146, 163, 191, .6);
      border-radius: 8px;
      border: 1px solid #fff;
      color: #fff;
      line-height: 138px;
      font-family: Exo, arial, sans-serif;
      font-size: 55px;
  }
  
      .container .title {
      width: ;
      height: 50px;
      position: relative
  }
  
      .container .title span {
      display: inline-block;
      width: 140px;
      font-size: 20px;
      font-family: 'Exo', arial, sans-serif;
      color: #fff;
      line-height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
       &lt;h2&gt;Apartments Coming Soon!&lt;/h2&gt;
       &lt;div class="content"&gt;
         &lt;div class="days"&gt;85&lt;/div&gt;
         &lt;div class="hours"&gt;22&lt;/div&gt;
         &lt;div class="minutes"&gt;33&lt;/div&gt;
         &lt;div class="seconds"&gt;54&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class="title"&gt;
         &lt;span&gt;Days&lt;/span&gt;
         &lt;span&gt;Hours&lt;/span&gt;
         &lt;span&gt;Minutes&lt;/span&gt;
         &lt;span&gt;Seconds&lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>