Pomoc w skalowaniu formularza Bootstrap form

Question

Hej, jako że no moje wątłe doświadczenie z bootstrapem i stylowaniemprzysporzyło mi nieco problemu z responsywnośćią i osiągnięciem zamierzonego efektu>
Tłumacze, chciałbym aby formularz odpowiednio się skalował względem zmniejszania tzn jeśli miejsca zabraknie to elementy nie powinny się składać pojedynczo a chciałbym żeby od razu składały się jak w grid systemie czyli kiedy wszystkie są  jakby one line.
Problem jest taki, że aktualnie przy zmniejszaniu pola input są pojedynczo składane, jednak chciałbym żeby dla każdego  inline-form składało się już całkowicie 

To jest kod: 

<div class="formatka">
    <div class="form-group-row">
        <div class="form-row form-row-title py-2">Example Title:</div>
        <div class="form-inline form-row">
            <label class="col-form-label" for="exampleField1">Example Label:</label>
            <input type="text" name="nazwa" value="" id="exampleField1" class="form-control" placeholder="Enter text">
        </div>
        <div class="form-inline">
            <label class="col-form-label">Example Label:</label>
            <input type="text" name="nazwa" value="" id="exampleField2" class="form-control" placeholder="Enter text">
            <input type="text" name="nazwa" value="" id="exampleField3" class="form-control" placeholder="Enter text">
        </div>
        <div class="form-inline form-row">
            <label class="col-form-label" for="exampleField4">Example Label:</label>
            <input type="text" name="nazwa" value="" id="exampleField4" class="form-control" placeholder="Enter text">
            <label class="col-form-label" for="exampleField5">Example Label:</label>
            <input type="text" name="nazwa" value="" id="exampleField5" class="form-control" placeholder="Enter text">
        </div>
        <div class="form-inline form-row">
            <label class="col-form-label" for="exampleField6" text="">Example Label:</label>
            <input type="text" name="nazwa" value="" id="exampleField6" class="form-control" placeholder="Enter text">
            <input type="text" name="nazwa" value="" id="exampleField7" class="form-control" placeholder="Enter text">
            <input type="text" name="nazwa" value="" id="exampleField8" class="form-control" placeholder="Enter text">
        </div>
    </div>
</div>

.formatka {
    flex: 1 1 auto;
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    position: relative;
    border: solid var(--color-lightgrey) .1rem;
    display: inline-grid;
}

Generalnie dopiero kiedy wszystkie elementy maja najmniejszy rozmiar przyjmujeą zamierzony efekt wyświetelnia 
chciałbym żeby to miało miejsce za każdym razem dla odpowiedniej sekcji, natomiast w przypadku powolnego skalowania ucina mi po prostu input- podspód a nie tworzy czegoś takiego co na zdjęciu 

Comments

Może głupie pyta ale czemu nie korzystasz z gotowych rozwiązań B?

---

bo układ który jest mi potrzebny jest nie-osiagalny, też nie ukrywam ja jestem backendowcem i nie za bardzo potrafie użyć systemów bootsrapa

---

Narysuj w Paintcie jaki chcesz układ. Bo z kodu nie chce mi się domyślać.

Inaczej nie wiem jak Ci pomóc.