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!