Getting @media queries to work correctly with buttons

Question

I'm trying to do a few things here:

1. make these buttons responsive to each screen size
2. to have the buttons shift down when the screen size gets to Mobile- size and smaller (but keeping at least 4 buttons per row so I can add more buttons later)
3. when the screen size gets to 768px or above, the rows of buttons shift back to being wider with 8 buttons per row
4. using bootstrap 4 (but will use 3 if it's better for this)

I've been trying to get these working like this for a couple days now but I just can't seem to get the media queries right. This is for a photo gallery I'm building.

The code I wrote is below and here's a codepen of it - https://codepen.io/gradyhouston/pen/bKLbOO/

Thank you for any help!

HTML

.img-responsive {
  display: none;
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .page-head {
    font-size: 18px;
    /* margin-top: -20px; */
    padding: 0px;
  }
}

@media only screen and (min-width: 376px) and (max-width: 768px) {
  .container-gallery .vertical-buttons {
    display: flex;
    align-items: center;
    /* display: block; */
  }
}


/* @media only screen and (min-width: 768px) {

    } */

.all-button {
  display: flex;
  justify-content: center;
  margin: auto;
}

.vertical-align {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 5px;
}

.vertical-buttons {
  display: flex;
  justify-content: center;
  padding: 5px;
}

.locations {
  /* margin: 0 auto; */
  /* position: absolute;
    display: flex;
    justify-content: space-evenly; */
}

.button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  width: 90px;
  height: 48px;
  border: 1px solid black;
  background-color: #285e84;
  /*   background-color: transparent; */
  border-radius: 2px;
  color: #fff;
  /* letter-spacing: 2px; */
  /* margin-bottom: 30px */
}

.button:hover {
  background-color: #363636;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #fff;
}

.button:active,
.button.is-checked {
  background-color: #42928b;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

<div class="locations">
  <button type="button" class="button all-button is-checked" data- filter="">All</button>
  <div class="container-gallery">

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4  l12">
        <button type="button" class="button" data- filter=".jekyll">Test</button>
        <button type="button" class="button" data-filter=".st- 
    simons">Test</button>
        <button type="button" class="button" data- filter=".monterey">Test</button>
        <button type="button" class="button" data-filter=".blizzcon- 
    2014">Test</button>
        <button type="button" class="button" data-filter=".timberline- 
    lodge">Test</button>
        <button type="button" class="button" data-filter=".lake- 
    trillium">Test</button>
      </div>
    </div>

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4 l12">
        <button type="button" class="button" data-filter=".santa- 
    cruz">Test</button>
        <button type="button" class="button" data-filter=".san- 
    francisco">Test</button>
        <button type="button" class="button" data-filter=".muir">Test</button>
        <button type="button" class="button" data- filter=".vancouver">Test</button>
        <button type="button" class="button" data-filter=".willamette- 
    falls">Test</button>
        <button type="button" class="button" data-filter=".arlington- 
    cemetery">Test</button>
      </div>
    </div>

    <div class="row vertical-align">
      <div class="col vertical-buttons xs4 s4 l12">
        <button type="button" class="button" data- filter=".edgewood">Test</button>
        <button type="button" class="button" data-filter=".hwy- 
    1">Test</button>
        <button type="button" class="button" data- filter=".filoli">Test</button>
        <button type="button" class="button" data- filter=".seattle">Test</button>
        <button type="button" class="button" data-filter=".chihuly- 
    garden">Test</button>
        <button type="button" class="button" data-filter=".mount- 
    hood">Test</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You just need to add the line 'flex-wrap: wrapto the selector.vertical-buttons`. Try this code.

.vertical-buttons {
    display: flex;
    justify-content: center;
    padding: 5px;
    flex-wrap: wrap;
}