Hi John
There is no easy way to do this.
For the pagination and filters to work, the results must all be generated by the same query.
You need a CSS solution to change how you display the first two elements.
That in principle shouldn't be too difficult using selectors such as :nth-child or :nth-of-type.
However, Toolset uses the Bootstrap grid system, which splits content into rows.
Your Loop Output section for the archive presumably looks something like this to achieve 3 columns:
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Things archive"]</div>
[wpv-item index=other]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Things archive"]</div>
[wpv-item index=3]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Things archive"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-4"></div>
</div>
</wpv-loop>
Which generates markup something like this:
<div class="row ">
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
</div>
<div class="row ">
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
</div>
<div class="row ">
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
</div>
<div class="row ">
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
<div class="col-sm-4">...content...</div>
</div>
If we use CSS to make the first two items of the first row take up 50% available width each, where should the third item in that row go?
Meaning, we can't use a row based layout system such as the Toolset grid.
Instead your loop output should be simplified to not impose any formatting itself, e.g.
<div class="archive-container">
<wpv-loop>
<div class="archive-item">[wpv-post-body view_template="Loop item in Things archive"]</div>
</wpv-loop>
</div>
So you'll have a single container div for all of the results, and a wrapper div for each iteration of the archive loop.
You'll need to add your own CSS rules to turn this into a 3 column grid.
I strongly recommend you use flexbox, which for this example is fairly straightforward. Learn more here: hidden link
Once you have your 3 columns working, you can use the nth-child selector like so to set different widths for the first two items:
.archive-item:nth-child(1), .archive-item:nth-child(2) {
/* custom width style */
}
