Search bar aligned except in responsive mode

Question

How can I get this format in this search bar?

In non-responsive mode everything would be aligned, but when at break point 768 px, the style should be that of the image.

Example:

@media (max-width: 768px) {
.search_bar_container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
}

<div class="search_bar_container">
<div class="search_bar_container_left">
<div class="defaults_filter_bar">
            <!-- Year filter -->
    <div class="filter_container_temporada">
        <label for="temporada">Temporada</label>
        <select id="filtro_temporada" class='form-control'>
            <option value="all">Totes</option>
        </select>
    </div>
  <!-- Month filter -->
  <div class="filter_container_mes">
        <label for="mes">Mes</label>
        <select id="filtro_mes" class='form-control'>
            <option value="all">Tots</option>
            <option value="1">Gener</option>
            <option value="2">Febrer</option>
            <option value="3">Març</option>
            <option value="4">Abril</option>
            <option value="5">Maig</option>
            <option value="6">Juny</option>
            <option value="7">Juliol</option>
            <option value="8">Agost</option>
            <option value="9">Setembre</option>
            <option value="10">Octubre</option>
            <option value="11">Novembre</option>
            <option value="12">Desembre</option>
        </select>
    </div>
</div>
</div>
<div class="search_bar_container_right">
<!-- Buttons -->
        <div class="buttons_filter_bar">
            <div class="buttons_filter_bar_search">
                <button class="search-button" onclick="filterTable()">Cercar</button>
            </div>
                <div class="buttons_filter_bar_reset">
                <button class="reset-button" onclick="resetFilters()">Reset</button>
            </div>
        </div>
</div>
</div>
<!-- Avanzado -->
<div class="advanced-button_filter_bar_search">
<button class="advanced-button" id="advanced_filter_button" onclick="toggleAdvanced()">Avançat ▼</button>
</div>

I have only managed to set the css to breakpoint 768px.

Answer 1

You will have to use flex on all of the parent containers that have multiple direct children in order to get them all on one line for breakpoints over 768px. Since all the elements are wrapped in divs, that means everything is block-level and will stack vertically by default:

@media (min-width: 769px) {
  body,
  .search_bar_container,
  .defaults_filter_bar,
  .filter_container_temporada,
  .filter_container_mes,
  .buttons_filter_bar{
    display: flex;
  }
}

Edited to add ordering of the Advanced button. There is an order property that can be applied to flex items, but to get what you want requires reordering of the HTML:

@media (max-width: 768px) {
  .search_bar_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  
  .advanced-button_filter_bar_search {
    width: 100%;
  }
}

@media (min-width: 769px) {
  body,
  .search_bar_container,
  .defaults_filter_bar,
  .filter_container_temporada,
  .filter_container_mes,
  .buttons_filter_bar{
    display: flex;
  }
  .search_bar_container_left {
    order: 1
  }
  .advanced-button_filter_bar_search {
    order: 2;
  }
  .search_bar_container_right {
    order: 3;
  }
  
}

<div class="search_bar_container">
  <div class="search_bar_container_left">
    <div class="defaults_filter_bar">
      <!-- Year filter -->
      <div class="filter_container_temporada">
        <label for="temporada">Temporada</label>
        <select id="filtro_temporada" class='form-control'>
          <option value="all">Totes</option>
        </select>
      </div>
      <!-- Month filter -->
      <div class="filter_container_mes">
        <label for="mes">Mes</label>
        <select id="filtro_mes" class='form-control'>
          <option value="all">Tots</option>
          <option value="1">Gener</option>
          <option value="2">Febrer</option>
          <option value="3">Març</option>
          <option value="4">Abril</option>
          <option value="5">Maig</option>
          <option value="6">Juny</option>
          <option value="7">Juliol</option>
          <option value="8">Agost</option>
          <option value="9">Setembre</option>
          <option value="10">Octubre</option>
          <option value="11">Novembre</option>
          <option value="12">Desembre</option>
        </select>
      </div>
    </div>
  </div>
  <div class="search_bar_container_right">
    <!-- Buttons -->
    <div class="buttons_filter_bar">
      <div class="buttons_filter_bar_search">
        <button class="search-button" onclick="filterTable()">Cercar</button>
      </div>
      <div class="buttons_filter_bar_reset">
        <button class="reset-button" onclick="resetFilters()">Reset</button>
      </div>
    </div>
  </div>
  <!-- Avanzado -->
  <div class="advanced-button_filter_bar_search">
    <button class="advanced-button" id="advanced_filter_button" onclick="toggleAdvanced()">Avançat ▼</button>
  </div>
</div>