Output a function on if screen width is smaller than x

What you described is possible and everybody is doing it.

Suppose in the markup we have [image] and [link text].

In normal (big) screen, display none the [link text].

In mobile (small) screen, display block the [link text], display none the [image].

But the text would still be in three columns, which I don’t want.

It is in the markup, but not visible.

You generally have to assign a class or id to the elements so you can apply CSS to them.

The only way I can see to output the text outside the columns is to run the loop twice on the same page. One loop with the three div columns and one with just the text. Won’t that slow down the page load, even if I hide one with CSS?

My markup is essentially like this:

<div class="col1">
[featured image post 1]
[featured image post 4]
[featured image post 7]
</div>
<div class="col2">
[featured image post 2]
[featured image post 5]
[featured image post 8]
</div>
<div class="col3">
[featured image post 3]
[featured image post 6]
[featured image post 9]
</div>

If I fool around with the CSS so that the three divs do not display as side-by-side columns in mobile view, the posts will still be out of order, which does matter to me.

Is that a table? Tables don’t work very well for layout purposes.

It’s three divs that each take up 33% of the screen. It looks fabulous.

The only way I can see to output the text outside the columns is to run the loop twice on the same page. One loop with the three div columns and one with just the text.

Within the loop you could get the image along with other thing from the post, there is no need for second loop.

If I want the display to work the way I want it, the second loop is probably necessary. No one has suggested an alternative.