Q:

How change search btn on focus input?

How change search btn on focus input? The initial state:

<form action="">
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

What I want to get on focus of input. I need use only css, not js.

<form action="">
  <button type="submit">Search</button>
  <input type="text" placeholder="Search">
</form>

How make it?

A:

Create a flex container on the form and style the button with order: -1 if it's focused. This will allow the button to appear before the input assuming other flex items are set to their initial order value of 0. 
form {
    display: flex;
}

form input:focus + button {
    order: -1;
}

