Moving to ready for development as I believe it's important for this to be done this sprint, but feel free to move it if I'm disrupting anything @ovasileva @Jdlrobson !!

Proposal for Reordering Elements in Mobile View

Objective:
To reorder elements within the MediaWiki section with data-mw-section-id=0 for mobile view, ensuring that the element with the ID #mwDg appears (usually the lead paragraph?) before the infobox element.

Current HTML Structure:

html
<div data-mw-section-id="0">
    <table>Infobox</table>
    <div id="mwDg">Lead Paragraph</div>
</div>

Proposed CSS Solution:

The following CSS solution uses Flexbox to reorder the elements in mobile view without changing the HTML structure.

1. CSS Implementation:

/* Media query for mobile view */
@media (max-width: 768px) {
    [data-mw-section-id="0"] {
        flex-direction: column-reverse; /* Reverse the stacking order for mobile */
    }

    #mwDg {
        order: 1; /* Change order for mobile view */
    }

    [data-mw-section-id="0"] > table {
        order: 2; /* Change order for mobile view */
    }
}

Explanation:

• Flexbox Layout: The data-mw-section-id="0" container is set to use Flexbox with a vertical layout (flex-direction: column). This stacks the child elements (i.e., #mwDg and <table>) vertically by default.
• Order Property: The order property is used to define the visual order of the elements within the Flexbox container.

@Jdlrobson Just want to check if something like this has any obvious limitations that I am not seeing such as how consistent is the selector class/id for the lead paragraph and where the style rules would have to be, whether core or in Minerva, before creating the patch.
cc: @SToyofuku-WMF

See latest conversation with Content Transform this week

In T366391#9978145, @KSarabia-WMF wrote:

Proposal for Reordering Elements in Mobile View

Objective:
To reorder elements within the MediaWiki section with data-mw-section-id=0 for mobile view, ensuring that the element with the ID #mwDg appears (usually the lead paragraph?) before the infobox element.

Current HTML Structure:

html
<div data-mw-section-id="0">
    <table>Infobox</table>
    <div id="mwDg">Lead Paragraph</div>
</div>

Proposed CSS Solution:

The following CSS solution uses Flexbox to reorder the elements in mobile view without changing the HTML structure.

1. CSS Implementation:

/* Media query for mobile view */
@media (max-width: 768px) {
    [data-mw-section-id="0"] {
        flex-direction: column-reverse; /* Reverse the stacking order for mobile */
    }

    #mwDg {
        order: 1; /* Change order for mobile view */
    }

    [data-mw-section-id="0"] > table {
        order: 2; /* Change order for mobile view */
    }
}

Explanation:

• Flexbox Layout: The data-mw-section-id="0" container is set to use Flexbox with a vertical layout (flex-direction: column). This stacks the child elements (i.e., #mwDg and <table>) vertically by default.
• Order Property: The order property is used to define the visual order of the elements within the Flexbox container.

I don't think the CSS approach here will always work... #mwDg is a unique ID so won't apply to all elements. Applying order to tables, will reorder them to end of the lead paragraph and would jumble the content. For a CSS approach like this to work at minimum the lead paragraph itself would need to have a class on it. Then the following might work...

[data-mw-section-id="0"] {
    display: flex;
    flex-direction: column;
}
[data-mw-section-id="0"]  > * {
   order: 2;
}
[data-mw-section-id="0"]  > p:not(.mw-empty-elt):first-of-type,
[data-mw-section-id="0"]  > .hatnote {
   order: 1;
}

It currently won't work until https://gerrit.wikimedia.org/r/c/mediawiki/services/parsoid/+/1054950 is resolved.

Okay I propose we attempt a CSS only solution first.
I've proposed https://phabricator.wikimedia.org/T359002 - let's estimate that ticket and if we get a successful estimation we can move this to sign off.

In T366391#9999159, @Jdlrobson wrote:

Okay I propose we attempt a CSS only solution first.
I've proposed https://phabricator.wikimedia.org/T359002 - let's estimate that ticket and if we get a successful estimation we can move this to sign off.

Moving to signoff as we have an estimate on T359002: Lead paragraph is not hoisted in new Parsoid HTML - reimplement CSS only solution