Change the position of text only in html

Question

I would like to do something like a media screen in html, I would like on the phone the button to appear the filters appear below the whistle but not on computer, how can I do this?

CELL PHONE:

COMPUTER:

Code:

<button id="filtroselects">
  <img src="/imagens/iconfiltro.png" height="40px" width="40px"> Filtros
</button>

<div id="escolha">
<form id="selectsfiltro">
    <h6>Faixa Etaria:</h6>
    <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
    </select>

    <br/>
    <br/> 
    <h6>Sexo:</h6>
    <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
    </select>

    <br/>
    <br/>
    <h6>Recurso a arma:</h6>
    <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
    </select>


    <br/>
    <br/>
    <h6>Localidade:</h6>
    <select id="Distrito" class="custom-select">
        <option ></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
    </select>
</form>

<br>

    <div class="botesdefiltrar">
        <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
        <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
  </div>   
  </div>

  <br>

  <h5 id="denuncia">Caso saiba de algum caso de violencia doméstica
  <a href="https://www.cmjornal.pt/mais-cm/eu-reporter-cm?ref=geral_MenuHeader" class="denunciastyle" target="_blank">denuncie aqui</a>
  </h5> 

Answer 1

In my view the simplest option for this is to use display:flex along with the property order and in the @media change the order to put the elements the way you want. In case I took a ID that I already had in the H5 and put order: -1 when the screen is smaller than 768px, thus the H5 jump to the top of the container.

Follow the image code above. I created a flex container encompassing all other content to facilitate, but if it is to your liking can put your own body as being the flex container

.d-flex {
  display:flex;
  flex-direction: column;
  align-items: start;
}
@media screen and (max-width: 768px) {
  #denuncia {
    order: -1;
  }
}

<div class="d-flex">
  <button id="filtroselects">
    <img src="https://placecage.com/100/100" height="40px" width="40px"> Filtros
  </button>

  <div id="escolha">
    <form id="selectsfiltro">
      <h6>Faixa Etaria:</h6>
      <select id="FaixaEtaria" class="custom-select">
        <option></option>
        <option value="1">0-17</option>
        <option value="2">18-25</option>
        <option value="3">26-35</option>
        <option value="4">36 ou mais</option>
      </select>

      <br />
      <br />
      <h6>Sexo:</h6>
      <select id="Sexo" class="custom-select">
        <option></option>
        <option value="5">Masc</option>
        <option value="6">Fem</option>
      </select>

      <br />
      <br />
      <h6>Recurso a arma:</h6>
      <select id="RecursoArma" class="custom-select">
        <option></option>
        <option value="7">Sim</option>
        <option value="8">Não</option>
      </select>


      <br />
      <br />
      <h6>Localidade:</h6>
      <select id="Distrito" class="custom-select">
        <option></option>
        <option value="9">Viana do Castelo</option>
        <option value="10">Vila Real</option>
        <option value="11">Bragança</option>
        <option value="12">Braga</option>
        <option value="13">Porto</option>
        <option value="14">Aveiro</option>
        <option value="15">Viseu</option>
        <option value="16">Guarda</option>
        <option value="17">Coimbra</option>
        <option value="18">Castelo Branco</option>
        <option value="19">Leiria</option>
        <option value="20">Lisboa</option>
        <option value="21">Santarém</option>
        <option value="22">Portalegre</option>
        <option value="23">Évora</option>
        <option value="24">Setúbal</option>
        <option value="25">Beja</option>
        <option value="26">Faro</option>
        <option value="27">Açores</option>
        <option value="28">Madeira</option>
      </select>
    </form>

    <br>

    <div class="botesdefiltrar">
      <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
      <button type="reset" id="btnLimpar" class="btn btn-outline-warning">Limpar Filtro</button>
    </div>
  </div>

  <br>

  <h5 id="denuncia">Caso saiba de algum caso de violencia doméstica
    <a href="https://www.cmjornal.pt/mais-cm/eu-reporter-cm?ref=geral_MenuHeader" class="denunciastyle"
      target="_blank">denuncie aqui</a>
  </h5>
</div>