Responsive Cards

Dear Campers.

I am trying to make two cards responsive using Bootstrap 4 but I am failing.
They work perfectly on all screen size except Kindle Fire with 800*1280 size screen.

On my form, there are 4 cards in total, but I would like to push the last two on the next line when that specific size screen is being used.

 <div id='wrapper'>
<div class="card-deck">
  <div class="card text-white bg-primary mb-3" style="max-width: 30rem;">
    <div class="card-body">
      <div class="card-header">Question 1</div>
      <h5 class="card-title">woop</h5>
      <p class="card-text" style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      
    </div>
  </div>
  <div class="card text-white bg-success mb-3" style="max-width: 30rem;">
    <div class="card-body">
      <div class="card-header">Question 2</div>
      <h5 class="card-title">woop</h5>
      <p class="card-text" style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
  </div>
  <div class="card text-white bg-danger mb-3 card-column" style="max-width: 30rem;">
    <div class="card-body">
      <div class="card-header">Question 3</div>
      <h5 class="card-title col-md-9">1) woop</h5>
      <p class="card-text" style="text-align:justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
          </div></div>
          <div class="card text-white bg-secondary mb-3 card-column" style="max-width: 30rem;">
            <div class="card-body">
              <div class="card-header">Question 4</div>
              <h5 class="card-title">woop</h5>
              <p class="card-text" style="text-align:justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
          </div>
          </div>

Could you please help me? Thank you.

add :-

also for making cards responsive use in css @media(max-width: SIZEpx) or @media(min-width: SIZEpx)

Hey, thank you for the reply. So, I would like the last two cards, to be pushed to the next line so that all 4 cards, will expand properly on the screen size. Any idea how to do it? I am completely lost.