Adapt Layout of Drag and Drop Question

Hi there, if you still need, I was able to put some code together that moves the Groups container into a newly created row beneath the Items container and also centers the items. First, create a Pick, Group, and Rank question that has "Add columns" enabled.
Then, update the question's JavaScript with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

qid = this.questionId;
var lastrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table tr:last';

jQuery(lastrow).after('...');

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

qid = this.questionId;
var groupcont = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr > td.groupsContainerTd.BorderColor';
var newrow = '#'+qid+' > div.Inner.BorderColor.DragAndDrop > div > fieldset > div > table > tbody > tr:nth-child(2)';

jQuery(groupcont).detach().appendTo(newrow);

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});
Finally, add the below CSS to the Style section of the survey's Look & Feel. Adjust the minimum height of the Items container as needed based on the number of items.
.Skin .PGR .DragAndDrop td.itemsContainerTd {
min-height: 250px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


@media (max-width:480px) {

.Skin .PGR .DragAndDrop .Group h2 {
    width: 100% !important;
}

.Skin .PGR .DragAndDrop .Group {
    width: 50% !important;
}

.Skin .PGR .DragAndDrop .QuestionBody .Group>div>ul>li, .Skin .RO .DND>ul>li {
    width: 85% !important;
}

}