I need to rewrite/move the header of one View into the first row of that View.
Current View output:
<div class="view">
<div class="view-header">view header text</div>
<div class="view-content">
<div class="views-row views-row-1">output</div>
<div class="views-row views-row-2">output</div>
<div class="views-row views-row-3">output</div>
<div class="views-row views-row-4">output</div>
<div class="views-row views-row-5">output</div>
<div class="views-row views-row-6">output</div>
</div>
</div>
Desired Output:
<div class="view">
<div class="view-content">
<div class="views-row views-row-1">view header text</div>
<div class="views-row views-row-2">output</div>
<div class="views-row views-row-3">output</div>
<div class="views-row views-row-4">output</div>
<div class="views-row views-row-5">output</div>
<div class="views-row views-row-6">output</div>
<div class="views-row views-row-7">output</div>
</div>
</div>
How can this be accomplished?
The views-row divs are then displayed inline in a responsive flex grid, so that each views-row div has the same height as its neighbor divs on that same row. Each views-row div is 25% width, so they are displayed in 4 columns (4 divs across the page, with subsequent divs wrapping in 4 additional columns below as needed).
I need the header to be part of that flex grid. I tried applying the flex grid markup to the "view-header" div and the "view-content" div, but it does not provide the desired result.
Thanks!