Why can't I fit 4 columns with cards into a small screen using Bootstrap 4?

Question

The 4 columns won't fit in a small screen no matter what I try, given my repertoire. The last column shows at the bottm of the cards stretched horizontally.

@media (max-width: 575px) {
  .crd-group {
    flex-wrap: wrap;
  }
  .crd-group .col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.card {
  min-width: 300px;
  background-color: #fafafa;
  font-size: 12px;
  border-radius: 5px !important;
  flex-basis: 25%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  outline: none;
  border: none;
  border-radius: 7px;
  flex-direction: inherit !important;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
  display: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/993e61022f.js" crossorigin="anonymous"></script>

<div id="cardsContainer">
  <div class="col crd-group">
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>
  </div>
  <div class="col crd-group">
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>
  </div>
  <div class="col crd-group">
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-6 col-md-6 col-xl-12">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>

  </div>
  <div class="col crd-group"></div>
</div>

This is if I don't specify a min-width: 300px, for example:

Answer 1

Well, it's tricky, because there's a lot of content stuffed inside these cards to be squeezed into 4 columns, but if you use 'container-fluid row' class on the root element, and trim some fat from the inner column elements using p-0 (removing padding) you can get 4 columns displayed in the md breakpoint screen size, but only up to a point.

After that, you'll need to make the deeply nested inner columns turn full width (col-12) so that they stuck on top of each other in order to make room for the card containers, but I am not sure about the visual result.

@media (max-width: 575px) {
  .crd-group {
    flex-wrap: wrap;
  }
  .crd-group .col-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.card {
/*   min-width: 300px; */
  background-color: #fafafa;
  font-size: 12px;
  border-radius: 5px !important;
/*   flex-basis: 25%; */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  outline: none;
  border: none;
  border-radius: 7px;
  flex-direction: inherit !important;
  transition: all 0.3s ease-in-out;
  transform: scale(1);
/*   display: none; */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/993e61022f.js" crossorigin="anonymous"></script>

<div id="cardsContainer" class="container-fluid row">
  <div class="col crd-group p-0">
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>
  </div>
  <div class="col crd-group p-0">
    <div class="col-xl-12 p-0 ">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>
  </div>
  <div class="col crd-group p-0">
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>

  </div>
  <div class="col crd-group p-0">
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-10"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="2"></div>
      </div>
    </div>
    <div class="col-xl-12 p-0">
      <div class="form-group row p-1 p-md-1 m-2 m-md-1 card q2 show">
        <div class="col-6 mt-3"><label for="quarter">Quarter:</label>
          <select class="form-control" name="quarter" value="2">
            <option value="1">1</option>
            <option value="2" selected="">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="monthNum">Month:</label>
          <select class="form-control" name="month" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="weekNum">Week:</label>
          <select class="form-control" name="weekNum" value="3">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <div class="col-6 mt-3"><label for="date">Date:</label><input type="date" class="form-control" name="date" value="2023-02-02"></div>
        <div class="col-12 mt-3"><label for="status">Status:</label>
          <select class="form-control" name="status" value="Planned">
            <option value="Planned" selected="">Planned</option>
            <option value="Published">Published</option>
            <option value="Cancelled">Cancelled</option>
          </select>
        </div>
        <div class="col-12 mt-3"><label for="status">Image URL:</label><input type="text" class="form-control imgLink" name="img-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
          <a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank"><img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" class="card-img"></a>
        </div>
        <div class="col-12 mt-3"><label for="post">Post:</label><textarea class="form-control post" name="post">Test</textarea></div>
        <div class="col-12 mt-3"><a href="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" target="_blank" style="cursor: pointer;"><label for="publishedPostLink">Published Link:</label></a><input type="text" class="form-control published-link-input" name="published-link"
            value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"></div>
        <div class="form-group" hidden=""><label for="postNum">Post Number:</label><input type="text" class="form-control" name="postNum" value="1"></div>
      </div>
    </div>

  </div>
</div>