How to customise a MaxDiff experiment to display a vertical layout

<script>
    $(function() {
        $(document).on('frame-initialize-after-transitions', function (event) {
            if (!event.target.classList.contains('frame-conjoint')) {
                return;
            }

            var $frame = $(event.target);

            $frame.find('.product-wrapper').each(function (index, wrapper) {
                var $wrapper = $(wrapper),
                    $level = $wrapper.find('.product-level'),
                    $best = $wrapper.find('.btn-action').eq(0),
                    $worst = $wrapper.find('.btn-action').eq(1);

                $wrapper.removeClass('col-md-3').addClass('col-padding');
                $wrapper.find('.plan-list .flex-container').addClass('flex-stretch');
                $level.insertAfter($best);

                $level.addClass('flex-grow').css({height: ''});
                $best.addClass('flex-static flex-center').css({height: ''});
                $worst.addClass('flex-static flex-center').css({height: ''});
            });
            $frame.find('.product-level').matchHeight();
        });
    });
</script>

<style>
    .flex-stretch {
        align-items: stretch;
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flex-static {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 120px;
    }

    .flex-grow {
        flex-grow: 1;
    }

    .col-padding {
        padding-left: 15px;
        padding-right: 15px;
    }

    @media (max-width: 991px) {
        .flex-static {
            flex-basis: 60px;
        }

        .conjoint.worst + .btn:not(.btn-default):not(.btn-multiple):not(.btn-gg):not(.btn-vw) {
            border-left: 1px solid black;
        }
    }
</style>