Suppose I have following fields.yaml:

fields:
    fieldA:
        ...
        label: fieldA
        span: storm
        cssClass: col-md-6
    fieldB:
        label: fieldB
        span: storm
        cssClass: col-md-6
    fieldC:
        label: fieldC
        span: storm
        cssClass: col-md-6
    fieldD:
        label: fieldD
        span: storm
        cssClass: col-md-6

which renders:

Now when I resize the screen smaller, I get:

But I would like them to wrap like this:

So I created a little temporary hack, let's redefine our fields.yaml. The block specifies the block name, and blockCssClass specifies the bootstrap class for this block. For the field element, i changed cssClass to col-xs-12 to be full width inside its block, there could also be possibilities to create more layouts like this.

fields:
    fieldA:
        ...
        label: fieldA
        span: storm
        cssClass: col-xs-12
        block: left_block
        blockCssClass: col-md-6
    fieldB:
        label: fieldB
        span: storm
        cssClass: col-xs-12
        block: right_block
        blockCssClass: col-md-6
    fieldC:
        label: fieldC
        span: storm
        cssClass: col-xs-12
        block: left_block
        blockCssClass: col-md-6
    fieldD:
        label: fieldD
        span: storm
        cssClass: col-xs-12
        block: right_block
        blockCssClass: col-md-6

The hack itself is in /modules/backend/widgets/form/partials/_form_fields.htm:

Original file:

<?php foreach ($fields as $field): ?>
    <?= $this->makePartial('field-container', ['field' => $field]) ?>
<?php endforeach ?>

Edited file:

<?php
    // Setup blocks
    $blockFields = [];

    $normalFields = [];

    foreach ($fields as $field) {
        if (isset($field->config['block']) && isset($field->config['blockCssClass'])) {
            $blockName = $field->config['block'];

            $blockCssClass = $field->config['blockCssClass'];

            $blockFields[$blockName]['cssClass'] = $blockCssClass;
            $blockFields[$blockName]['fields'][] = $field;
        } else {
            $normalFields[] = $field;
        }
    }
?>

<?php foreach ($blockFields as $blockName => $block): ?>
    <div class="form-block <?= $block['cssClass'] ?>">
        <?php foreach ($block['fields'] as $field): ?>
            <?= $this->makePartial('field-container', ['field' => $field]) ?>
        <?php endforeach; ?>
    </div>
<?php endforeach; ?>

<?php foreach ($normalFields as $field): ?>
    <?= $this->makePartial('field-container', ['field' => $field]) ?>
<?php endforeach ?>

I think it looks ugly at the moment but you should get the idea. I'm thinking to maybe create a new FormBlock class and a partial and allow configuring blocks outside of fields: key, eventually something like this:

blocks:
    left_block:
        cssClass: col-md-6
    right_block:
        cssClass: col-md-6

fields:
    fieldA:
        ...
        label: fieldA
        span: storm
        cssClass: col-xs-12
        block: left_block
    fieldB:
        label: fieldB
        span: storm
        cssClass: col-xs-12
        block: right_block
    fieldC:
        label: fieldC
        span: storm
        cssClass: col-xs-12
        block: left_block
    fieldD:
        label: fieldD
        span: storm
        cssClass: col-xs-12
        block: right_block

Any thoughts?

You might get more traction with this as a Github issue

What's the status of this idea? I'm looking for a similar solution here

+1

Hello. I see that theme also is actual. So i think i found some solution to extend this idea without FormBlock class. with using $this scope

<?php
// Setup blocks
$blockFields = [];

$normalFields = [];
/** @var Array $fields */
foreach ($fields as $field) {
    if (isset($field->config['block']) && isset($field->config['blockCssClass'])) {
        $blockFields[$field->config['block']]['fields'][] = $field;
    } else {
        $normalFields[] = $field;
    }
}
?>

<?php foreach ($this->getConfig('blocks') as $blockName => $blockConfig): ?>
    <div class="form-block <?= $blockConfig['cssClass'] ?>">
        <?php foreach ($blockFields[$blockName]['fields'] as $field): ?>
            <?= $this->makePartial('field-container', ['field' => $field]) ?>
        <?php endforeach; ?>
    </div>
<?php endforeach; ?>

<?php foreach ($normalFields as $field): ?>
    <?= $this->makePartial('field-container', ['field' => $field]) ?>
<?php endforeach ?>

and extend without rewrite default _form-fields.htm partial with plugin rewrite like:

...
    public function boot()
    {
        app('events')->listen('backend.form.extendFieldsBefore', function(Form $widget) {
            $widget->addViewPath('$/vendor/plugin/partials/');
        });
    }

And thank you for your ideas.