Układanie elementów w bootstrap'ie jako block i inline

Question

Witam! W jaki sposób muszę ułożyć klasy bootstrapowe aby osiągnąć taki efekt:

W pełnej szerokości okna te elementy są obok siebie, jeżeli zbraknie miejsca to są wyświetlane jeden pod drugim ale Label znajduje się maksymalnie z lewej strony a input z prawej strony:

Nie wiem jak do tego trochę podejść, napisałem prosty "szablon" https://jsfiddle.net/adriansikora344/Lh260maw/1/ Ale nie jestem pewny czy też każdy input nie powinien się znajdować w osobnej kolumnie. W jaki sposób coś takiego osiągnąć ?

Answer 1

Spróbuj https://jsfiddle.net/syp7wr2f/

Comments

Dzięki :) W ramach ćwiczeń to czy jestem w stanie zrobić to jeszcze tak że w najwęższym widoku input type='text' będzie na całą szerokość a przycisk submit pod tym inputem z prawej strony ? Do tego muszę już zmieniać kolumny ?

---

<div class='form-group col-12 col-md-auto row'>
   <input class="col-form-label col-12 col-md-auto" type="text" placeholder="szukaj...">
   <div class="col-12 d-flex justify-content-end col-md-auto offset-0 offset-md-0">
       <input type="submit">
   </div>
</div>