Changing block location based on size?

Question

I want to have a block (contains a image and some text, nothing overly fancy) appear on the top of the products in a category page when it is on desktop, then on mobile I want it to be on the bottom of the products in the category page. I have figured out that how to put the block on the top with this XML:

<referenceContainer name="category.product.list.additional">
   <block class="Magento\Cms\Block\Block" name="cat_arista">
       <arguments>
            <argument name="block_id" xsi:type="string">cat_arista</argument>
       </arguments>
   </block>
</referenceContainer>

But how would I adjust this to show up on the bottom for mobile? I was thinking another layout update call, but I'm not sure if that will lead to it showing up twice. I am using Magento 2, and the pearl theme.

Edit:

I don't know what container would be the bottom the of the product list. I am using this list from github, but I'm not sure which one to use.

I also don't think that I can do any css magic because it still will show up in both places?

New edit: The container for the bottom of the product list is content.bottom . I'll post my css magic as an answer if I figure it out!

Answer 1

I can think of 3 methods that would work (depending on your DOM structure):

---

Using two layout blocks You can create two blocks each with a unique name and then hide/display the relevant one using CSS media queries. To add a unique class to each block you can wrap it in another container, something like this:

<referenceContainer name="category.product.list.additional">
    <container name="some.container.top" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container some-container--top">
        <block class="Magento\Cms\Block\Block" name="cat_arista_top">
           <arguments>
                <argument name="block_id" xsi:type="string">cat_arista</argument>
           </arguments>
       </block>
    </container> 
</referenceContainer>

<referenceContainer name="content.bottom">
    <container name="some.container.bottom" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container some-container--bottom">
        <block class="Magento\Cms\Block\Block" name="cat_arista_bottom">
           <arguments>
                <argument name="block_id" xsi:type="string">cat_arista</argument>
           </arguments>
       </block>
    </container> 
</referenceContainer>

Then you can target some-container--bottom and some-container--top with CSS to hide/show the relevant element.

Using Javascript Another method would be to use Javascript alongside the built in matchMedia (JS media queries) to move the element.

Using Flexbox/CSS Grid The cleanest way would be to use Flexbox or CSS Grid and use the order property to position your element, but this depends on your DOM structure.