Responsive field alignment

Hi Guys,

I'm re-designing one of my sites, and want my registrationform to look and behave like this
1. Labels on top of the fields
2. 6 inputfields in 2 rows of 3 in center of the page on Big/Medium viewport
3. Stack fields on top of eachothes on mobile/small viewport

Example of the result i want: https://www.instantmagazine.com/nl/trial

This is the code of my form, generated by the wizard.

<div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-voornaam"><div class="gcore-line-td" id="ftd-30DAY-voornaam"><label for="30DAY-voornaam" class="gcore-label-top">Uw  voornaam</label>
<div class="gcore-display-table gcore-input-wide" id="fin-30DAY-voornaam"><input name="Voornaam" id="30DAY-voornaam" value="" placeholder="" maxlength="" size="" class=" validate['required','nodigit']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-achternaam"><div class="gcore-line-td" id="ftd-30DAY-achternaam"><label for="30DAY-achternaam" class="gcore-label-top">Uw achternaam</label>
<div class="gcore-display-table gcore-input-wide" id="fin-30DAY-achternaam"><input name="Achternaam" id="30DAY-achternaam" value="" placeholder="" maxlength="" size="" class=" validate['required','alpha']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-emailadres"><div class="gcore-line-td" id="ftd-30DAY-emailadres"><label for="30DAY-emailadres" class="gcore-label-top">Uw e-mailadres</label>
<div class="gcore-display-table gcore-input-wide" id="fin-30DAY-emailadres"><input name="e-mailadres" id="30DAY-emailadres" value="" placeholder="" maxlength="" size="" class=" validate['required','email']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-bedrijfsnaam"><div class="gcore-line-td" id="ftd-30DAY-bedrijfsnaam"><label for="30DAY-bedrijfsnaam" class="gcore-label-top">Bedrijfsnaam</label>
<div class="gcore-display-table gcore-input-wide" id="fin-30DAY-bedrijfsnaam"><input name="Bedrijfsnaam" id="30DAY-bedrijfsnaam" value="" placeholder="" maxlength="" size="" class=" validate['required','alphanum']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-Functie"><div class="gcore-line-td" id="ftd-Functie"><label for="Functie" class="gcore-label-top">Functie</label>
<div class="gcore-display-table gcore-input-wide" id="fin-Functie"><input name="Functie" id="Functie" value="" placeholder="" maxlength="" size="" class=" validate['required','alpha']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-telefoonnummer"><div class="gcore-line-td" id="ftd-30DAY-telefoonnummer"><label for="30DAY-telefoonnummer" class="gcore-label-top">Telefoonnummer</label>
<div class="gcore-display-table gcore-input-wide" id="fin-30DAY-telefoonnummer"><input name="Telefoonnummer" id="30DAY-telefoonnummer" value="" placeholder="" maxlength="" size="" class=" validate['required','number']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-30DAY-verzendknop"><div class="gcore-line-td" id="ftd-30DAY-verzendknop"><div class="gcore-display-table gcore-input" id="fin-30DAY-verzendknop"><input name="Verzenden" id="30DAY-verzendknop" type="submit" value="Start Challenge" class="" style="" data-load-state="" /></div></div></div>

I've been playing around with some of the UIKIT examples to try and style the layout, but no luck so far.
Can you Guys help me with this?

Hi DeRo77,

If you use the Multi Field action in the Setup tab Advanced Group and add three text inputs then the form will behave like this. See my test here.

Bob