Ridimensionare la searchbar a seconda della dimensione della finestra

[installer19]

Ciao a tutti,

è da poco più di un mese che bazzico con l'HTML.
Ho letto un po' qualche guida qua e la e poi mi sono buttato a capofitto alla creazione del sito che ho in mente con l'aiuto di Joomla e della funzione "ispeziona" dei browser.

Mi perdonerete quindi se non sono ancora padrone del gergo e se parlo in maniera molto elementare.

Come da oggetto, quello che vorrei ottenere è fare in modo che la mia searchbar assuma una struttura diversa a seconda che la finestra sia a tutto schermo oppure copra solo una porzione dello schermo.
Il comportamento deve essere simile a quanto fa la barra di tripadvisor: riducendo la finestra vi accorgerete che passa dallo stare tutto su una riga allo stare tutto su una colonna.
Ed è proprio quello che vorrei fare anche io con la mia.

Io ho creato due classi con queste istruzioni che ho scritto in un CSS di override:

@media ( min-width: 401px) {
  .the_4_fields_per_row {
    width: 100% !important;
    margin: 0px;
    display: block;
    float: left;
  }
}

@media (max-width: 400px ) {
  .the_4_fields_per_column {
    width: 50% !important;
    margin: 0px;
    display: block;
    float: left;
  }
}

ma il comportamento che ha è quello di continuare a stare tutto su una riga con gli elementi che si restringono (tipo a fisarmonica).

Le due classi le ho inserite nel "Module Class Suffix" del modulo di Joomla.

Mi potreste dare una mano e dire cosa devo aggiungere o cambiare nelle due istruzioni per avere ciò che ho in mente io?

Grazie mille