[Bug]: Grey hero variant: description list is ordered incorrectly at mobile

[helenb]

Describe the bug

In an onsHero component, we can pass in a description list. This renders in the wrong order at mobile (the desktop ordering is correct)

Current ordering at mobile:

And at desktop:

Expected behaviour / outcome

The desktop order should remain the same.

The mobile order should be as follows (note that the spacing between definition term and the definition description is not correct in this example - it should be aligned as if in columns as in the example above):

List the steps necessary to reproduce the bug

You can use the following config to test:

{{
        onsHero({
            "topic": "Statistical article",
            "title": page.display_title,
            "variants": 'grey',
            "text": "Summary text",
            "detailsColumns": 12,
            "descriptionList": {

                "descriptionListLabel": "",
                "termCol": "6",
                "descriptionCol": "6",
                "itemsList": [
                    {
                        "term": "Release date",
                        "descriptions": [
                            {
                                "description": "28 January 2025"
                            }
                        ]
                    },
                    {
                        "term": "Edition",
                        "descriptions": [
                            {
                                "description": "Latest"
                            }
                        ]
                    },
                    contact_details,
                    {
                        "term": "Next release",
                        "descriptions": [
                            {
                                "description": "28 February 2025"
                            }
                        ]
                    },
                    {
                        "term": "Releases",
                        "descriptions": [
                            {
                                "description": "View previous releases",
                                "url": "http://www.example.com",
                            }
                        ]
                    },
                ]
            },
            "breadcrumbs":
                {
                    "ariaLabel": 'Breadcrumbs',
                    "itemsList": [
                        {
                            "url": '/',
                            "text": 'Home'
                        },
                        {
                            "url": '/components',
                            "text": 'Components'
                        }
                    ]
                }
        })
    }}

Additional context

A grid layout may be a good solution here. See the markup and CSS used in the beta build:

https://github.com/ONSdigital/dis-wagtail/blob/main/cms/jinja2/templates/pages/statistical_article_page.html#L34-L63

https://github.com/ONSdigital/dis-wagtail/blob/main/cms/static_src/sass/components/_common-header.scss#L38-L57

What version of the ONS Design System are you using?

72.2.0

What device(s) are you using?

Desktop

What operating system(s) are you using?

macOS

What browser(s) are you using?

Chrome